Как поставить два блока в 1 строку, а если страница уменьшается то они становятся друг под друга?

Question

[Алексей]

<div class="Prokrutka">
<div id="aviable">
  <div id="checkGroup1"><label class="box-label"><input type="checkbox" id="op1" onchange="Options()" data-num="Сборный груз"> Сборный груз</label></div>
  <div id="checkGroup2"><label class="box-label"><input type="checkbox" id="op2" onchange="Options()" data-num="Негабаритный груз"> Негабаритный груз</label></div>
</div>
</div>
<button id="CompleteButtonOption" onclick="Complete()">Подтвердить</button>



<br>

<div class="Prokrutka_out">
 <div id="selected"> Вы выбрали:
</div>
  </div>

.Prokrutka {
  margin-left: 15px;
  max-width: 35%;
  height: 400px; /* высота нашего блока */
  width: 35%; /* ширина нашего блока */
  background: #fff; /* цвет фона, белый */
  border: 1px solid #C1C1C1; /* размер и цвет границы блока */
  overflow-x: scroll; /* прокрутка по горизонтали */
  overflow-y: scroll; /* прокрутка по вертикали */
  padding-left: 15px;
  }
.Prokrutka_out {
  margin-left: 15px;
  max-width: 20%;
  height: 400px; /* высота нашего блока */
  width: 20%; /* ширина нашего блока */
  background: #fff; /* цвет фона, белый */
  border: 1px solid #C1C1C1; /* размер и цвет границы блока */
  overflow-x: scroll; /* прокрутка по горизонтали */
  overflow-y: scroll; /* прокрутка по вертикали */
  padding-left: 15px;
  }
 
#CompleteButtonOption {
  margin-top: 10px;
  margin-left: 15px;
  background-color: green;
  max-width: 35%;
  width: 35%;
}

Comments

[Lord_Dantes]

display: flex;
flex-wrap: wrap;

родителю

Answer 1

[Дима]

Вот самый простой вариант, без изменения вашей razmetki: https://jsfiddle.net/92nkj407/

Answer 2

[Renat871]

атрибут flex вам в помощь.
ну можно еще media
загуглите;) все поймете