JSFiddle - React, Tailwind, and code Playground
by lollero
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/grids-responsive-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Varela+Round"></script>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-2-5">
<div class="l-box heading">
Lorem ipsum dolor sit.
</div>
</div>
<div class="pure-u-1 pure-u-sm-3-5">
<div class="l-box text-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti officia voluptatum blanditiis tempora nisi. Beatae dolores quidem vel accusantium nemo quisquam vero perspiciatis eveniet recusandae molestias unde, error maxime provident possimus est, ratione assumenda necessitatibus quo.
</p>
<p>
Facere, accusantium necessitatibus quisquam, consectetur iure dolores neque minima delectus dolorem possimus vero assumenda! Alias ad ipsa sapiente iste non velit voluptas sit, accusantium tempore distinctio ipsum quos, sequi magnam. Explicabo pariatur nihil quisquam quas id in commodi, neque labore voluptates saepe harum, aperiam rem accusantium porro nulla. Nobis amet sunt nihil facere vel quas odio quasi, similique illum et quo eaque necessitatibus facilis. Laborum doloremque ipsa illum accusamus odio dicta, ea commodi ratione obcaecati nulla facilis. Neque laudantium voluptates aperiam maxime laborum saepe, eos voluptatum quas cum consequatur nostrum harum praesentium quisquam explicabo!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptates voluptate perspiciatis itaque quia eveniet tempora quod dolorem velit!
</p>
</div>
</div>
</div>
CSS
.l-box {
padding: 10px;
}
.heading {
font-family: 'Varela Round', sans-serif;
font-weight: 400;
font-size: 24px;
color: #555;
padding: 20px;
}
.text-container {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 17px;
color: #666;
}
JavaScript
$('.text-container').children(':not(:first)').hide();