<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.