resize css rule changes other divs

I have several divs with css rule ‘resize: both’ on all of them. The problem is that when I start to resize any of them others move automatically. Is is possible to change that behaviour?

Tried ‘position: absolute’ but it isn’t a solution, cause it collects all divs in one place. They are also will be draggable like notes, so I can’t stick them to corners.

The resizable div should change its size over the others (with higher z-index or smth like this). Others should stay at their positions while resizing and after

code: https://jsfiddle.net/q3m5ya8f/

.el {
  resize: both;
  overflow-y: auto;
  border: 2px solid black;
  margin: 10px;
  height: 100px;
  width: 100px;
}

.container {
  display: flex;
  flex-direction: row;
}
<div class="container">

  <div class="el">
    1
  </div>

  <div class="el">
    2
  </div>

</div>


<div class="el">
  3
</div>

pic

Answer

Well you can achieve this by position:absolute and position each of div using left/right/top/bottom properties separately like done in bellow snippet ( position can be your desired one I have taken for example ) :

.el {
  resize: both;
  overflow-y: auto;
  border: 2px solid black;
  margin: 10px;
  height: 100px;
  width: 100px;
  position: absolute
}

.el1 {
  left: 0
}

.el2 {
  right: 0
}

.el3 {
  bottom: 0
}

.container {
  display: flex;
  flex-direction: row;
}
<div class="container">

  <div class="el el1">
    1
  </div>

  <div class="el el2">
    2
  </div>

</div>


<div class="el el3">
  3
</div>