JSFiddle - React, Tailwind, and code Playground

by kreoTech

HTML

<div class="container">
    
  <div class="bottom">
    <div></div>
  </div>
  <div class="up">
        <div></div>
        <div></div>
        <div></div>
    </div>
  <div style="clear:both;"></div>
</div>

SCSS

*{
  margin: 0;
  padding: 0;
}

.container {
  border: 4px solid green;
  padding: 10px;
  margin: 10px;
  >.up{
    width: 25%;
    border: 3px solid lightblue;
    padding: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    >div{
      width: 100%;
      height: 100px;
      background:lightblue;
      display: block;
      margin-bottom: 10px;
      &:last-of-type{margin-bottom:0;}
    }
  }
  >.bottom{
    padding: 10px;
    width: 50%;
    display: block;
    float: right;
    margin-right: 25%;
    vertical-align:top;
    box-sizing: border-box;
    border: 3px solid pink;
    >div{
      width: 95%;
      height: 300px;
      background: pink;
    }
  }
}


@media  only screen and (max-width:600px) {
  // .container{
  //   display: table;
  //   width: 100%;
  //   .bottom{
  //     display:table-caption;
  //   }
  // }
  .bottom {
    margin-right: 0 !important;
    width: 100% !important;
  }
  .up {
    float: left !important;
    clear: left !important;
    width: 100% !important;
  }
}