Как расположить элементы в компоненте с помощью css

Вот мой код, фронт пишу на vue-3

<div class="css-list-task-item">
    <div>
        <div class="indicator">
            <div class="task-item">
                <p class="task-header" :class="{marquee: item.taskTemplate.name.length &gt; 33}">{{item.taskTemplate.name}}</p>
                <p :class="{greenStatus: item.taskStatus.name === 'В работе'}">{{ statusLabel }}</p>
            </div>
            <div class="task-item">
                <p>Время до активации:</p>
                <p>{{getTimeRemaining(item.dtBeg)
                    <=0 ? 'Вышло' : showDateTime(getTimeRemaining(item.dtBeg))}}</p>
            </div>
            <div class="task-item"><img title="Время начала" :src="ibegin" />
                <p class="bold">{{$tools.showDateTimeMsk(item.dtBeg)}}</p><img title="Время окончания" :src="iexpiration" />
                <p class="bold">{{$tools.showDateTimeMsk(item.dtEnd)}}</p>
            </div>
            <div class="task-item"><img title="Время на выполнение" :src="iendtask" />
                <p class="bold">{{item.taskTemplate.executionTime}} мин</p><img title="Количество сделанных приостановок" :src="icounted" />
                <p class="bold">{{item.cntDeadline}}</p>
            </div>
        </div>
    </div>
</div>

Вот моя стилизация, пишу на scss

<style scoped lang="scss">
.css-list-task-item {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ded7d7;
  height: auto;

  .indicator {
    background: green;
    width: 10px;
    margin: -10px 10px 0px -10px;
  }
  .task-item {
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 350px;
  }
 .....
}
</style>

В данный момент выглядит вот так: [1]: https://i.stack.imgur.com/5xk8k.png Хотелось бы чтобы не было таких пробелов между строками. А также в последней строке, чтобы первые два элемента были вместе слева, а вторые два элемента была слева(например значок Zz и цифра) Как такое можно реализовать?