JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="container">
    <h1>Inline Formatting and Parent Element Height</h1>
    <h2>Control</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis pellentesque cursus. Donec ut ligula id erat pretium ullamcorper nec eget quam. Mauris ac mauris elit, et adipiscing eros. Curabitur nec luctus ipsum. Duis hendrerit tellus in nunc ornare et mattis enim condimentum. Aenean metus augue, gravida vel dapibus in, facilisis vel ipsum. Vivamus vitae orci sapien. Suspendisse aliquam vestibulum mi, nec faucibus nisl vestibulum eget. Duis feugiat enim sed quam luctus eget placerat mi convallis. Aliquam condimentum diam ut neque volutpat vel vulputate nisl vehicula. Mauris ac purus eu nisl tincidunt cursus. Morbi facilisis dui eget orci blandit placerat. Mauris consectetur, diam eget dapibus luctus, orci dui laoreet risus, eget ultricies dolor mi nec metus.</p>
    
    <h2>With Small Text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis pellentesque cursus. <span class="small">Donec ut ligula</span> id erat pretium ullamcorper nec eget quam. Mauris ac mauris elit, et adipiscing eros. Curabitur nec luctus ipsum. Duis hendrerit tellus in nunc ornare et mattis enim condimentum. Aenean metus augue, gravida vel dapibus in, facilisis vel ipsum. Vivamus vitae orci sapien. Suspendisse aliquam vestibulum mi, nec faucibus nisl vestibulum eget. Duis feugiat enim sed quam luctus eget placerat mi convallis. Aliquam condimentum diam ut neque volutpat vel vulputate nisl vehicula. Mauris ac purus eu nisl tincidunt cursus. Morbi facilisis dui eget orci blandit placerat. Mauris consectetur, diam eget dapibus luctus, orci dui laoreet risus, eget ultricies dolor mi nec metus.</p>
    
    
    <h2>Vertical-Align: Top</h2>
    <p class="vertical-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis pellentesque cursus. <span class="small">Donec ut ligula</span> id erat pretium ullamcorper nec eget quam. Mauris ac...

CSS

#container { width: 500px; font-size: 16px; line-height: 24px; }
h1,h2 { font-weight: bold; margin: 1em 0; line-height: 1; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }

.height { color: gray; }

.small { font-size: 13px; color: red; }

.vertical-top .small { vertical-align: top; }
.vertical-bottom .small { vertical-align: bottom; }

.line-height .small { line-height: 23px; }

JavaScript

$('p').each(function() {
    $el = $(this);
    $el.after('<div class="height">Height: ' + $el.height() + '</div>');
});