JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<div class="col-md-6 box-left">
form
</div>
<div class="col-md-4">
<div class="box-top">
    (wheel)
</div>
<div class="box-bot">
    bot_box
</div>
</div>
</section>

CSS

body {margin:0;padding:0;}
section {background:#fdffd7;width:100%;position:relative;height:100%;float:left;}
.col-md-6 {width:60%;float:left;}
.col-md-4 {width:40%;float:left;}


.box-left {background:red;height:160px;}
.box-top {background:blue;}
.box-bot {background:green;}


.box-top {
  height:130px;
}

.box-bot {
  height:20px;
}


@media (max-width: 400px) {
    .box-top {
      position:absolute;
      left:0;
      top:0;
       width:100%;
    }
    .box-left {
      margin-top:130px;/* same as .box-top width*/
    }
    .box-bot {
      position:absolute;
      bottom:0;
      left:0;
    }
    section {
      padding-bottom:10px;/* same as .box-bot width*/
    }
}