JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.6.0/EQCSS.min.js"></script>
Responsive Element Width.
<br>
Drag from Right Blue Border
<br>
<br>
<br>

<div class="container-fluid drag">
    <div class="child">
    123
    </div>
        <div class="child">
        456
    </div>
  </div>
  
  
  <br>
<br>

Same structure in a <br>
450 colum<br>
<br>
<br>

<div class="container-fluid" style="width:450px">
    <div class="child">
    123
    </div>
        <div class="child">
        456
    </div>
  </div>

Same structure in a <br>
200px smaller colum<br>
<br>
<br>

<div class="container-fluid" style="width:200px">
    <div class="child">
    123
    </div>
        <div class="child">
        456
    </div>
  </div>

CSS

.container-fluid {
  width:90%;
  margin:0 auto;
  min-width:180px;
}
.drag {
    border-right:2px dotted blue;

}

.container {
  width:400px;
}
.container:after {
  content="";
  display:block;
  
}
.child {
  width: 49.5%;
  padding:2rem;
  font-size: 7rem;
  text-align:center;
  display:inline-block;
  box-sizing:border-box;
  background-color:white;
  margin-bottom:4px;
  border:1px solid #000;
}

@element '.container-fluid ' and (max-width: 475px){
  $this > .child {
    width: 100%;
    display:block;
  }
}
@element '.container-fluid ' and (min-width: 20px) and (max-width: 240px){
 $this  > .child{
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);
  transform-origin: center center;


/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:5rem;
width:180px;
overflow: visible;
}
}

JavaScript

$('.drag').resizable({
    handles: 'n,w,s,e'
});