CSS: creating div resizable

Question

Suppose I have a flexible layout and want to make it mutable.

I want to be able to resize one div just by dragging its border horizontally.

Take a look at this 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>

Run codeHide result

How should I do it?

Answer 1

check out this plunkr

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

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

Answer 2

You must follow this code

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