JSFiddle - React, Tailwind, and code Playground
HTML
<section id="" class="boxes">
<ul class="inline">nm
<li>
<article>
<h2>Mae hyn yn enghraifft prif llawer hwy</h2>
<p>
Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.
</p>
<a class="read-more" href="">Read more ></a>
</article>
</li>
</ul>
<ul class="inline">
<li>
<article>
<h2>Mae hyn</h2>
<p>
Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.
</p>
<a class="read-more" href="">Read more ></a>
</article>
</li>
</ul>
<ul class="inline">
<li>
<article>
<h2>Mae hyn yn enghraifft prif llawer hwy enghraifft prif llawer hwy enghraifft prif llawer hwy</h2>
<p>
Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.
</p>
<a class="read-more" href="">Read more ></a>
</article>
</li>
</ul>
</section>
CSS
* {
font-family: arial;
}
body {
padding: 10px;
}
section.boxes {
white-space: nowrap;
}
ul.inline {
display: inline-block;
list-style-type: none;
width: 33.3%;
white-space: normal;
}
ul.inline li article h2 {
border-bottom: 3px solid green;
padding: 5px 0;
font-weight: bold;
font-size: 13px;
}
ul.inline li article p {
padding: 5px 0;
}