JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="item">
  <div class="image">
    <img src="//fillmurray.com/640/480" />
  </div>
  <div class="text">
    <h3>
      Bill Murray is one cool cat
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.
    </p>
  </div>
</div>

CSS

html {
  box-sizing: border-box;
  font: 100%/1.25 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.grid,
.flow,
.item {
  margin-left: -10px;
  margin-right: -10px;
}
.grid:after
.flow:after
.item:after {
  content: "";
  display: block;
  clear: both;
}
.grid > *,
.flow > * ,
.item > * {
  float: left;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

.image img {
  width: 100%;
  height: auto;
}
.text h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.image {
  min-width: 33.3333333333%;
  width: calc((640px - 100%) * 640);
  max-width: 50%;
}
.text {
  min-width: 50%;
  width: calc((100% - 640px) * 640);
  max-width: 66.6666666666%;
}