Элементы в ROW, авто размещение для различных размеров

Question

Я делаю ввод с тегами, как в Stackoverflow

Я пытаюсь добавить теги разных размеров в ряд, но я не могу сделать так, чтобы они соответствовали высоте входа, не выдвигая вход из его собственной высоты ..

Я пытался использовать элемент Psuedo :before, чтобы он не занимал место, но у меня больше проблема с добавлением пробелов и строк и так далее ..

Посмотрите, как это не меняет высоту при добавлении тега в .. это не занимает пробел, но не position: absolute, поэтому ..

это мой код: (опять же, я не хочу использовать элемент psuedo или абсолютный)

.auto-comp-wrap
    border: 1px solid rgba(0,0,0,0.1)
    position: relative
    display: block
    padding: 0 $gap-rg
    width: 100%
    padding: 0.75rem 1rem
    border-radius: $bullet
    cursor: text
    .auto-comp-item
        position: relative
        display: inline-flex
        flex-direction: row
        align-items: center
        background: none
        width: auto
        height: unset
        margin-left: 1.25rem
        @include fs-rg
        &:before
            position: absolute
            content: ''
            width: calc(100% + 1rem)
            height: 100%
            padding: 1rem 0
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            background: rgba(0,0,0,0.1)
            border-radius: 3px

Answer 1

Используя flexbox, я сделал для вас скрипку: https://jsfiddle.net/AurScha/akoxs5gr/

<div class="tags-wrapper">
<div class="tag">
    tag 1
</div>
<div class="tag">
    tag 2
</div>
<div class="tag">
    tag 3
</div>
<div class="tag">
    tag 4
</div>
<input type=text class="tag-input" />

CSS:

.tags-wrapper{
    height: 40px;
    background: blue;
    display:flex;
    padding: 5px;
}
.tag-input{
    flex: 1;
}
.tag{
    background: red;
    margin-right: 5px;
    display:flex;
    align-items: center;
    padding:0 8px;
}

редактировать: для нескольких строк https://jsfiddle.net/AurScha/akoxs5gr/30/