<div class="flex">
  <div class="example">
    <h2>DEFAULT</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </div>
  <div class="example j">
    <h2>Jomhuria</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Jomhuria&display=swap');

:root{padding:0;background:#aaa;overflow:hidden}
.flex{
  display:flex;
  flex-direction:row;
  gap:1px;
}
h2{margin:0;line-height:1;font-size:125%}
.example{
  flex:1 auto;
  width:50%;
  padding:1rem;
  background:#fff;
  >p{
    line-height:1.5;
  }
  &.j>p{
    font-family:'Jomhuria'
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.