Как сделать категорию и поиск полого ввода изменяемого размера

Question

.box { 
 
    margin: 10px auto; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.container { 
 
    width: 900px; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    float: left; 
 
} 
 
input#cat, 
 
input#search { 
 
    height: 50px; 
 
    border: 1 solid #2b303b; 
 
    font-size: 10pt; 
 
    float: left; 
 
} 
 
.box1 .container-1 input#cat { 
 
    width: 25%; 
 
} 
 
.box1 input#search { 
 
    width: 75%; 
 
} 
 
.box2 .container-1 input#cat { 
 
    width: 25%; 
 
} 
 
.box2 .container-2 input#cat { 
 
    width: 25%; 
 
} 
 
.box2 input#search { 
 
    width: 50%; 
 
} 
 
.box3 .container-1 input#cat { 
 
    width: 25%; 
 
} 
 
.box3 .container-2 input#cat { 
 
    width: 25%; 
 
} 
 
.box3 .container-3 input#cat { 
 
    width: 25%; 
 
} 
 
.box3 input#search { 
 
    width: 25%; 
 
}

<div class="container"> 
 
    <h2>Senario 1</h2> 
 
    <div class="box box1"> 
 
     <div class="container-1"> 
 
      <input type="cat" id="cat" placeholder="Parent Category (A)"> 
 
     </div> 
 
     <div class="container-2"> 
 
      <input type="search" id="search" placeholder="Search..."> 
 
     </div> 
 
    </div> 
 
    <h2>Senario 2</h2> 
 
    <div class="box box2"> 
 
     <div class="container-1"> 
 
      <input type="cat" id="cat" placeholder="Parent Category (A)"> 
 
     </div> 
 
     <div class="container-2"> 
 
      <input type="cat" id="cat" placeholder="Sub-Category (B) of A"> 
 
     </div> 
 
     <div class="container-3"> 
 
      <input type="search" id="search" placeholder="Search..."> 
 
     </div> 
 
    </div> 
 
    <h2>Senario 3</h2> 
 
    <div class="box box3"> 
 
     <div class="container-1"> 
 
      <input type="cat" id="cat" placeholder="Parent Category (A)"> 
 
     </div> 
 
     <div class="container-2"> 
 
      <input type="cat" id="cat" placeholder="Sub-Category (B) of A"> 
 
     </div> 
 
     <div class="container-3"> 
 
      <input type="cat" id="cat" placeholder="Sub-Category (C) of B"> 
 
     </div> 
 
     <div class="container-4"> 
 
      <input type="search" id="search" placeholder="Search..."> 
 
     </div> 
 
    </div> 
 
</div>

Я настроил модуль DJ Объявления Расширенного поиска таким образом, что категория родители и ее дети находятся на одной линии с входным окном поиска , Я установил div категорий и выполнил поиск по статическому. Есть ли способ сделать их изменяемыми по размеру при добавлении категорий детей (см. Изображения).

Main Category + First Child Category + Second Child Category Код можно резюмировать следующим образом: HTML и CSS

Answer 1

Вы, вероятно, можно использовать resizable функцию JQuery UI, увидеть это: https://jqueryui.com/resizable/.

$(function() { 
 
    $("#resizable").resizable(); 
 
    });

#resizable { width: 150px; height: 150px; padding: 0.5em; } 
 
    #resizable h3 { text-align: center; margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<div id="resizable" class="ui-widget-content"> 
 
    <h3 class="ui-widget-header">Resizable</h3> 
 
</div>