JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div class="main">

  <div class="box left ">Image</div>
  <div class="box right"><br /><br />
    Map<br /><br />
  </div>
  <div class="box left clear">
    <h1>
      Title
    </h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet tincidunt laoreet. Vivamus lacinia sapien eget est malesuada, in malesuada leo egestas. Aenean purus nibh, mollis vel vehicula et, vestibulum in ipsum. Mauris vitae imperdiet libero, et lacinia ipsum. Morbi dictum faucibus lectus vitae interdum. Nam et elit at metus commodo gravida quis at metus. Phasellus laoreet eros nec diam semper molestie at ac dolor. Fusce facilisis dictum quam a semper. Sed facilisis arcu sed est ullamcorper, et finibus tortor fermentum.
    <br /><br />
    Morbi dapibus vel tellus sed mollis. Maecenas malesuada urna mi, sit amet gravida tellus tempus quis. Morbi maximus ornare purus, in sodales justo viverra vitae. Suspendisse tempus dui augue, vitae vestibulum nunc suscipit suscipit. Quisque convallis pretium feugiat. Aliquam erat volutpat. Ut fringilla erat ac varius egestas. Proin semper ac dui quis eleifend. Pellentesque facilisis mi scelerisque lorem aliquam, vel pellentesque urna gravida. Nullam aliquam tempor tellus vel scelerisque. Phasellus pretium, nulla sagittis porta tempus, nibh lacus ultrices ligula, ut dapibus diam diam quis felis. Etiam gravida ante nunc, scelerisque placerat nibh iaculis quis. Suspendisse lorem ligula, imperdiet in pellentesque eu, malesuada non tortor. Sed in mollis neque. Nullam ut sollicitudin nibh, non consequat risus.<br /><br />
    Morbi dapibus vel tellus sed mollis. Maecenas malesuada urna mi, sit amet gravida tellus tempus quis. Morbi maximus ornare purus, in sodales justo viverra vitae. Suspendisse tempus dui augue, vitae vestibulum nunc suscipit suscipit. Quisque convallis pretium feugiat. Aliquam erat volutpat. Ut fringilla erat ac varius egestas. Proin semper ac dui quis eleifend. Pellentesque facilisis mi scelerisque lorem aliquam,...

CSS

body {
  margin: 0px;
  padding: 0px;
}

.box {
  background-color: #dedede;
  box-sizing: border-box;
  margin-bottom: 5px;
  padding: 30px;
}

.left {
  width: 70%;
  float: left;
}

.right {
  width: 29%;
  float: right;
}

.clear {
  clear: both;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

.main {
  display: table;
}

@media only screen and (max-width: 600px) {
  .box {
    float: none;
    width: 100%;
  }
}