JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<div id="container">

    <div id="left">left</div>
    <div id="right">right</div>
    <div id="content"> </div>
    <div class="clear"></div>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
    width: 100%;
    height: 100vh;
}

#left {
    float: left;
    width: 200px;
    height: 100vh;
    background-color:blue;
}


@media screen and (min-width: 0px) and (max-width: 400px) {
  #content { display: none; }
  .clear { clear: none; display: none; }
}

@media (min-width: 401px) {
  #content {
      background-color:red;
      height: 100vh;
  }
  .clear {
    clear: both;
  }
}

#right {
    float: right;
    width: 200px;
    background-color:yellow;
    height: 100vh;    
}