Input text и кнопка в одну строку

Доброе время суток, столкнулся с такой проблемой: есть 4 колонки реализованные на flex. Флекс элементы имеют по 25% ширины контейнера. Однако когда в одну колонку я поместил поле text input и кнопку колонка увеличивается и происходит перенос колонки вниз. Испектор показывает что ширина этой колонки становится больше несмотря на то что флекс элементам установлено свойство flex: 0 1 25%; Буду очень благодарен за ответ

            <div class="main__row">
               <div class="main__column">
                  <form action="" class="main__form">
                     <input type="text" class="main__input">
                     <input type="button" class="main__btn" value="Add to favorites">
                  </form>
               </div>
               <div class="main__column">
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
                     eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
                     exercitationem quae odio?</p>
               </div>
               <div class="main__column">
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
                     eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
                     exercitationem quae odio?</p>
               </div>
               <div class="main__column">
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
                     eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
                     exercitationem quae odio?</p>
               </div>
            </div>       
.main {

   // .main__container
   &__container {
      width: 950px;
      margin: 0 auto;
   }

   // .main__row
   &__row {
      display: flex;
      flex-wrap: wrap;      

   }

   // .main__column
   &__column {
      flex: 0 1 25%;      
      padding: 0 5px;
   }

   // .main__form
   &__form {
      display: inline-flex;
   }

   // .main__input
   &__input {
      border: dashed;      
      
      
   }

   // .main__btn
   &__btn {
      
   }
}

Здесь можно посмотреть как это выглядит


Ответы (0 шт):