JSFiddle - React, Tailwind, and code Playground

by jasongennaro

HTML

<blockquote>
    <span class="quote open">&rdquo;</span>
    <span class="words">1. Hello</span>
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    <span class="words">2. Some dynamic words are going to be shown here&hellip;</span>
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    <span class="words">3. A a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</span>
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    <span class="words">4. Principia Mathematica</span>
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>

CSS

blockquote {
    position: relative;
    left: 20px;
    top: 20px;
    background-color: #eee;
    margin-bottom: 20px;
    max-width: 140px;
    display: inline-block;
}
.quote {
    font-size: 34px;
    position: absolute;
}
.open {
    left: -20px;
    top: -5px;
}
.close {
    right: -20px;
    bottom: -16px;
}

JavaScript

$('span.words').each(function(){
    var a = $(this).width();
    $(this).parent().css('max-width', a + 'px');
});