JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="block">
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptatum vero blanditiis officiis harum a rerum illum eveniet ratione aspernatur. Tempora sit, repudiandae quo incidunt quas similique ratione totam in.
</div>

<div class="lala">
  The side bar is spoused iyaya yayay
</div>  
<div class="clear"></div>
</div>

CSS

.block {
  /* display:flex;
  justify-content: space-around; */
}
.clear{
  clear:both
}
.box {
  background: red;
  float:left;
  width:70%;
}

.lala {
  background: green;
  float:right;
  width:30%;
}

/*@media screen and (max-device-width: 640px){
  /* some CSS here 
}*/

/* @media screen and (max-device-width: 640px) and (orientation: landscape){
  some CSS here 
}*/

@media screen and (max-width: 640px){
  div {
    background: green
  }
}