Позиционирование относительных элементов отключается при изменении разрешения экрана или добавлении нового элемента в пользовательский интерфейс.

Question

Я хочу создать макет, похожий на рисунок, показанный ниже,

Но когда я проектирую, я вижу только это, Для позиционирования элементы, отмеченные красным, я использую свойство position: относительное, но его положение изменяется при изменении экрана или добавлении нового элемента.

Я стремлюсь быть профессиональным дизайнером пользовательского интерфейса, чтобы сделать сайт отзывчивым, я наткнулся на flexbox и медиа-запросы. Как я могу использовать их здесь? Я использую div и table в качестве основных элементов для структурирования макета. Это то, что делают профессиональные дизайнеры пользовательского интерфейса?

Это макет, который я пытаюсь разработать, я представляю каждый раздел как div, и где бы я ни находил строки и столбцы, я вижу их как таблицу. Я иду в правильном направлении?

Вот фрагмент кода

#versionDiv {
    background-color: whitesmoke;
    height: 45px;
    display: flex;
    align-items: center;
    position: relative;
  
}
.space{
    height:10px;
}

table{
    position: relative;
    left:50px;
}

#borroweddiv {
    background-color: #ffc594;
    min-height:250px;
}


#borrowedtable tr td input {
    background-color: #ffc594;
    border: 1px solid black;
}

#borrowedtable td button {
    position: relative;
    left:100px;  
}

#dateColumn {
 position: relative;
 left:50px;    
}

button{
    height:44px;
    width:178px;
    cursor: pointer;
    border: solid 1px;
    background-color:#f2a900;
    font-family: ffunit;
    font-weight : 500;
    font-size: 20px;
    margin-bottom : 5px;
    margin-left: 2px;
    box-sizing: border-box;
}

#ReturnAll{
    position: relative;
    bottom:20px;
    left:100px;
}


h3,select{
    display: inline-block;
}

input {
    
    height:45px;
}

input[type=text] {
    width:380px;
}

input[type=date] {
    position: relative;
    width:180px;
    left: 50px;
}

th {
    text-align: left;
}

#borrowablediv {
    background-color: papayawhip;
    min-height: 250px;
}

select,option {
 
    display: unset !important;
    text-indent :5px !important;
    font-weight: bold;
    font-size: 16px;
    width:250px;
}

#borrowButtons {
    position: fixed;
    left:1000px;
    bottom:500px;
}

<link rel="stylesheet" href="  ./jquery-ui-1.12.1.custom/jquery-ui.css" />
<link rel="stylesheet" href="./jquery-ui-1.12.1.custom/jquery-ui.structure.css" />
<link rel="stylesheet" href="./jquery-ui-1.12.1.custom/jquery-ui.theme.css" />  
<script src="./jquery/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />  
<div id="mainDiv">
  <div id="versionDiv">
    &ensp;&ensp; <h3>Version</h3>&ensp;
    <select>
      <option value="1">text1</option>
      <option value="1">text2</option>
      <option value="1">text3</option>
    </select>
  </div>
  <div class="space"></div>
  <div id="borroweddiv">
    &ensp;&ensp; <h3 style="text-decoration: underline;">Feature</h3>&ensp;
    <table id="borrowedtable">
      <thead>
        <tr>
          <th>Feature</th>
          <th id="dateColumn">Date</th>
          <th><button id="ReturnAll">Return All</button></th>
        </tr>
        
      </thead>
      <tbody>
        <tr>
          <td><input type="text"></td>
          <td><input type="date"></td>
          <td><button>Return Now</button></td>
        </tr>
        <tr>
          <td><input type="text"></td>
          <td><input type="date"></td>
          <td><button>Return Now</button></td>
        </tr>
        <tr>
          <td><input type="text"></td>
          <td><input type="date"></td>
          <td><button>Return Now</button></td>
        </tr>
        <tr>
          <td><input type="text"></td>
          <td><input type="date"></td>
          <td><button>Return Now</button></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="space"></div>

  <div id="borrowablediv">
    &ensp;&ensp; <h3 style="text-decoration: underline;">Feature</h3>&ensp;
    <table id="borrowabletable">
      <tr>
        <thead>
          <th>Feature</th>
        </thead>
      </tr>  
  
      <tbody>
        <tr>
          <td>
            <select>
              <option value="1">text1</option>
              <option value="1">text2</option>
              <option value="1">text3</option>
            </select>
          </td>
        </tr>  
      </tbody>
     </table>
  </div>
  <div id="borrowButtons">
    <table>
      <tr>
        <th>Return Date</th>
      </tr>
      <tr>
        <td><input type="date"></td>
      </tr>
      <tr>
        <td><button>Borrow</button></td>
      </tr>
    </table>
   
  </div>
</div>