Как сделать вытеснение одного элемента другим?

Question

[Vann Damm]

Есть два дочерних элемента у родителя. Оба они занимают по 50% ширины. При клике на "Первый" , мне нужно чтобы "Второй" вытеснялся первым, и первый становился 100%. Суть вопроса в том, как сделать вытеснение, в моем случае "Второй" , просто накладывается на "Первый" и вытеснения не происходит

<div>
  <div>
            <div>
            Первый
         </div>
  </div>
        <div>Второй</div>
 </div>

Answer 1

[Danny Arty]

Например так, если я правильно понял

Comments

[Vann Damm]

Скорее такого рода у меня верстка. Извиняюсь что сразу пример не закинул.
https://codepen.io/artsiomlegat/pen/yLOqrQG

[Danny Arty]

Vann Damm, так и какой элемент то растягиваться должен?)

[Vann Damm]

Danny Arty, input с классом search_input. У меня вообще хедер был на гридах , если ты знаешь как это на гридах сделать было бы топ. И я подсмотрел там ребята растягивали его с помощью width: calc(100vw - 110px);

[Danny Arty]

Vann Damm, вот с гридом пример, думаю разберетесь

[Vann Damm]

Danny Arty, Спасибо!

[Vann Damm]

Danny Arty, Привет. Не получается, т.к гамбургер меню с инпутом у меня обернуты в див и FAQ с Выйти тоже. И нет возможности задать ширину через grid-column-start из-за обертки(. Как быть?

[Danny Arty]

Vann Damm, поправил под ваш вариант, но тогда надо будет задать фиксированную ширину гамбургеру, потому что в fr он будет прыгать

[Vann Damm]

Danny Arty, Все работает, только вот блок right падает под left) Как от его избавиться?

[Danny Arty]

Vann Damm, я не знаю какие у вас там размеры и тд, но думаю можно исправить если правильно задать grid-template-rows

Советую вам ознакомиться с документацией grid. Как можно верстать, не зная базовой разметки?)

[Vann Damm]

Danny Arty, На вашем примере падает тоже под left, т.е он то вытесняет right , но он становится под left

[Danny Arty]

Vann Damm, да, я заметил, это нужно подбирать значения для grid-template-rows

[Vann Damm]

Danny Arty, Привет, подскажи пожалуйста с вопросом. Добавление селекторов класса в тег html при модульном css?

Answer 2

[Никита Михайлов]

Покажите пример CSS, который вы сделали