CSS: Exchange 2 элемента позиции

Question

У меня есть 2 элемента, созданные библиотекой, поэтому я не могу изменить порядок в самом html:

<div class="search-container">
  <div class="tags"></div>
  <input class="search"/>
</div>
<div class="my-list">
...
</div>

Мне нужно поместить ввод выше div. Я переместил ввод выше, используя абсолютную позицию:

.search-container {
  position: relative;
}

.search {
  position: absolute;
  top: 0px;
}

.tags {
  position: relative;
  top: 38px;
}

Но у меня есть некоторые проблемы:

• . Неправильная высота контейнера для поиска.

• .search-container не увеличивается при добавлении новых тегов

Есть идеи?

Answer 1

Основано на комментарии @mhatch по моему вопросу. Я реализовал следующее решение:

.search-container {
  display: flex;
  flex-wrap: wrap;
}

.search {
  order: 1;
}

.tags {
  order: 20;
}