JSFiddle - React, Tailwind, and code Playground

by brucifer906

HTML

<div class="main">
  <div class="wrapper-1_5em">
    <h1>
      1.5em Example
    </h1>
    <div>
      <h2>This is some test text that we're testing</h2>
      <p>Lorem ipsum dolor sit amet, <big>consectetur adipisicing</big> elit. Velit eligendi soluta fuga repudiandae voluptate numquam ducimus ex sed nobis aliquid sunt itaque cumque repellat placeat architecto dolores ab, odio earum?</p>
    </div>
  </div>
  <div class="wrapper-1_5">
    <h1>
      1.5 Example
    </h1>
    <div>
      <h2>This is some test text that we're testing</h2>
      <p>Lorem ipsum dolor sit amet, <big>consectetur adipisicing</big> elit. Velit eligendi soluta fuga repudiandae voluptate numquam ducimus ex sed nobis aliquid sunt itaque cumque repellat placeat architecto dolores ab, odio earum?</p>
    </div>
  </div>
</div>

CSS

.wrapper-1_5em > div > p {
  line-height: 1.5em;
}

.wrapper-1_5 > div > p{
  line-height: 1.5;
}

big {
  font-size: 1.5em;
}

/* Getting the demo to look fancy */
.main{
  width: 70%;
  margin: 1rem auto;
}

[class^="wrapper-1_5"] {
  float: left;
width: 45%;
}

[class^="wrapper-1_5"] h2 {
  font-size: 2.5rem;
}

.wrapper-1_5em {
  margin-right: 2.5%;
}

.wrapper-1_5 {
  margin-left: 2.5%;
}