CSS: Создание div resizable

Question

Предположим, что у меня гибкий макет и вы хотите сделать его изменяемым по размеру.

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

Взгляните на эту Fiddle

HTML

#main { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 100vh; 
 
    .flex { 
 
    width: 100%; 
 
    &:nth-child(2) { 
 
     background: red; 
 
     overflow: auto; resize: horizontal; 
 
    } 
 
    } 
 
}

<div id="main"> 
 
    <div class="flex">ABC</div> 
 
    <div class="flex"> 
 
    DEF 
 
    </div> 
 
    <div class="flex">GHI</div> 
 
</div>

Как бы мне это сделать?

Answer 1

проверить это plunkr

https://plnkr.co/edit/sxs6RLXVV6REzQnipfgj?p=preview

$("#second").resizable(); 

Answer 2

Вы должны следовать этому коду

#main { 
    display: flex; 
    justify-content: space-between; 
    height: 100vh; 
    .flex { 
     width: 100%; 
     &:nth-child(2) { 
      background: red; 
      resize: both; 
      overflow: auto; 
     } 
    } 
}