Вставьте входы в div

Question

У меня проблема с залипанием входов в div.Когда я пытаюсь уменьшить страницу, все ломается.Возможно, мне также интересно, если я не разработаю опцию радио и ввода после нажатия на каждую страницу (справа, слева, сверху и снизу) отдельно.Как мне этого добиться?Каждый край может иметь различную обработку, поэтому мне нужно радио и вход на каждой стороне.

<div class="kwadratObrobka" style=" margin-top: 5%; font-family: 'Fira Sans', sans-serif; font-size:50%; text-align: center;" id="kwadratObrobka" name="kwadratObrobka"><br>
  <div class="gora" id="gora" name="gora">
    <form action="">
      <input type="radio" name="gora" value="zgrzew">zgrzew<br>
      <input type="radio" name="gora" value="tunel">tunel<br>
      <input type="radio" name="gora" value="szycie">szycie<br>
      <input type="radio" name="gora" value="dociecie">docięcie<br>oczka co:
      <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goraoczka" value=""><br>
      tunel cm: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goratunel" value=""><br>
    </form>
  </div>

  <div class="lewy" id="lewy" name="lewy" style="float: left; margin-left: 30%; margin-top: 4%;">
    <form action="">
      <input type="radio" name="lewy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="lewy" value="tunel"> tunel<br>
      <input type="radio" name="lewy" value="szycie"> szycie<br>
      <input type="radio" name="lewy" value="dociecie"> docięcie<br>
      oczka co:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewyoczka" value=""><br>
      tunel cm:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="prawy" id="prawy" name="prawy" style="float: right; margin-right: 30%; margin-top: 4%;">
    <form action="">
      <input type="radio" name="prawy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="prawy" value="tunel"> tunel<br>
      <input type="radio" name="prawy" value="szycie"> szycie<br>
      <input type="radio" name="prawy" value="dociecie"> docięcie<br>
      oczka co:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewyoczka" value=""><br>
      tunel cm:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="kwadrat" id="kwadrat" name="kwadrat" style="margin-left: auto; margin-right: auto; background: url('https://') ; background-size: 100%; margin-bottom: -30px;  margin-top: 10px; height: 150px; width: 150px; border: 1px dotted BLACK"></div>

  <div class="dol" id="dol" name="dol" style="margin-top: 4%;">
    <form action="">
      <input type="radio" name="dol" value="zgrzew"> zgrzew<br>
      <input type="radio" name="dol" value="tunel"> tunel<br>
      <input type="radio" name="dol" value="szycie"> szycie<br>
      <input type="radio" name="dol" value="dociecie"> docięcie<br>
      oczka co: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goraoczka" value=""><br>
      tunel cm: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goratunel" value=""><br>
    </form>
  </div>
</div>

Пример: https://jsfiddle.net/jwe8h49z/

Answer 1

Надеемся, что вы не используете какую-либо платформу CSS, используя CSS inline-block и width: calc(50% - 75px), вы можете решить эту проблему, как показано ниже

.d-inline-block {
  display: inline-block;
  text-align: left;
  max-width: 150px;
}

input[type="number"] {
  width: 50px
}

<div class="kwadratObrobka" style="margin-top: 40px; text-align: center;" id="kwadratObrobka" name="kwadratObrobka">
  <div class="gora" id="gora" name="gora">
    <form class="d-inline-block">
      <input type="radio" name="gora" value="zgrzew">zgrzew<br>
      <input type="radio" name="gora" value="tunel">tunel<br>
      <input type="radio" name="gora" value="szycie">szycie<br>
      <input type="radio" name="gora" value="dociecie">docięcie<br>oczka co:
      <input type="number" name="goraoczka" value=""><br>
      tunel cm: <input type="number" name="goratunel" value=""><br>
    </form>
  </div>

  <div class="lewy" id="lewy" name="lewy" style="float: left; margin-top: 40px; width: calc(50% - 75px); text-align: right">
    <form class="d-inline-block" style="margin-right: 40px">
      <input type="radio" name="lewy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="lewy" value="tunel"> tunel<br>
      <input type="radio" name="lewy" value="szycie"> szycie<br>
      <input type="radio" name="lewy" value="dociecie"> docięcie<br>
      oczka co:<input type="number" name="lewyoczka" value=""><br>
      tunel cm:<input type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="prawy" id="prawy" name="prawy" style="float: right; margin-top: 40px; width: calc(50% - 75px); text-align: left">
    <form class="d-inline-block" style="margin-left: 40px">
      <input type="radio" name="prawy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="prawy" value="tunel"> tunel<br>
      <input type="radio" name="prawy" value="szycie"> szycie<br>
      <input type="radio" name="prawy" value="dociecie"> docięcie<br>
      oczka co:<input type="number" name="lewyoczka" value=""><br>
      tunel cm:<input type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="kwadrat" id="kwadrat" name="kwadrat" style="margin-left: auto; margin-right: auto; margin-top: 20px; height: 150px; width: 150px; border: 1px dotted #000"></div>

  <div class="dol" id="dol" name="dol" style="margin-top: 40px">
    <form class="d-inline-block">
      <input type="radio" name="dol" value="zgrzew"> zgrzew<br>
      <input type="radio" name="dol" value="tunel"> tunel<br>
      <input type="radio" name="dol" value="szycie"> szycie<br>
      <input type="radio" name="dol" value="dociecie"> docięcie<br>
      oczka co: <input type="number" name="goraoczka" value=""><br>
      tunel cm: <input type="number" name="goratunel" value=""><br>
    </form>
  </div>
</div>

Answer 2

Добавьте следующий стиль, тогда он не сломается

div#prawy,div#lewy {
    width: 50%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin: 0 !important;
}