JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="trading_ui" id="trading_ui">
  <div class="Limit">
          
<input type="radio" name="tab" id="tab-A" checked="">
<input type="radio" name="tab" id="tab-B">

<label class="tab-link" for="tab-A">Buy</label>
<label class="tab-link" for="tab-B">Sell</label>
<article class="tab">
	 <form>
   <fieldset>
      <div>
         <h3>Limit Buy</h3>
         <label class="required">First Name: <input type="text" name="mailing_firstname" size="50" required /></label>
         <label class="required">Last Name: <input type="text" name="mailing_lastname" size="50" required /></label>
         <label>Organization: <input type="text" size="50" name="mailing_organization" /></label>
         <label class="required">Address: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">City: <input type="text" name="mailing_address" size="50" required /></label>

      </div>
   </fieldset>
</form>
</article>
<article class="tab">
	 <form>
   <fieldset>
      <div>
         <h3>Limit Sell</h3>
         <label class="required">First Name: <input type="text" name="mailing_firstname" size="50" required /></label>
         <label class="required">Last Name: <input type="text" name="mailing_lastname" size="50" required /></label>
         <label>Organization: <input type="text" size="50" name="mailing_organization" /></label>
         <label class="required">Address: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">City: <input type="text" name="mailing_address" size="50" required /></label>

      </div>
   </fieldset>
</form>
</article>
  </div>
  <div class="Market">
 <input type="radio" name="tab" id="tab-As" checked="">
<input type="radio" name="tab" id="tab-Bs">

<label class="tab-link" for="tab-As">Buy</label>
<label class="tab-link" for="tab-Bs">Sell</label>
<article class="tab">
	 <form>
   <fieldset>
      <div>
         <h3>Market Buy</h3>
         <label...

CSS

html, body {
  padding: 0;
  margin: 0;
}
.header{
  border-top: solid 3px #4074b5;
  background: rgba(0, 0, 0, 0.9);
  padding: 10px;
  padding-top: 5px;
  height:33px;
}
.logo{
  color: #FFFFFF;
  text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5,   0px -2px 0 #4074b5;
  font-size:28px;
}
.header > div{
  float:right;
  margin-right:10%;
}
.menu_button{
    display: inline-block;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #4074b5;
    text-decoration: none !important;
    margin-top: -10px;
    border-radius: 0 0 5px 5px;
    cursor:pointer;
}
.trading_ui{
   display: grid;
   position:relative;
   grid-template-columns: auto auto auto;
   grid-gap: 10px;
   padding: 10px;
   background: #444;
    transition: all 0.4s linear;
    margin-bottom:-370px;
     transform: translateY(-100%);
     height:350px;
     max-height:350px;

}
.trading_ui > div {
  background:#fff;
 // padding: 10px;
  position:relative;
}
.trading_ui > div > form > fieldset > div{
  position: relative;
}
.trading_ui > div > table{
   margin: 5% 10%;
  width:80%;
}
.trading_ui > div > table > tr{
      display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5%;
}
.trading_ui input[type="submit"]{
  background:red;
  margin: 0 10%;
  width:80%;
  cursor: pointer;
  user-select: none;
  color: white;
  font-size: 16px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  outline: none;
  background: rgb(112, 168, 0);
  border-color: rgb(112, 168, 0);
}
.trading_ui input[type="text"]{
//    color: rgb(212, 212, 212);
 //   background: rgb(47, 56, 63);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(64, 75, 85);
    border-image: initial;
    padding: 0px 0px 0px 10px;
    outline: none;
    font-size:16px;

}
input[type="radio"] { 
	display:...

JavaScript

var p = document.querySelector('.chart'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
var tool = document.getElementsByClassName('tool')[0];

var tool_w = tool.offsetWidth;
var warp = document.getElementsByClassName('warp')[0];

var warp_w = warp.offsetWidth;
   console.log(e.clientX - startX )
   //console.log(p.offsetWidth)

if(p.offsetWidth <= warp_w-5){
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   console.log(warp_w - p.offsetWidth - 5)
   tool.style.width = (warp_w - p.offsetWidth -4) + 'px';
//   p.style.height = (startHeight + e.clientY - startY) + 'px';
}else if( e.clientX - startX < 0)
{
  p.style.width = (startWidth + e.clientX - startX) + 'px';
   console.log(warp_w - p.offsetWidth - 5)
   tool.style.width = (warp_w - p.offsetWidth -4) + 'px';
}
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}