JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="card__copy card__copy--hasSponsor" data-class="isSponsored:card__copy--hasSponsor">
    
        
            <h1 class="card__title tk--hdr">
                Sample with a really really long title that wraps around and stacks into 2 lines
            </h1>
        <div class="cta__group">
        <button class="info__group sponsoredBtn">Call to action</button>
            <button class="info__group shareBtn">Share</button> </div>
</div>

CSS

h1 {
    font-size: 20px;
    font-family: Arial, sans-serif;
}
.sponsoredBtn {
    max-width: 64%;
    display: inline-block;
    height: 90%;
    vertical-align: middle;
}
.shareBtn {
    width: 35%;
    display: inline-block;
    height: 90%;
    vertical-align: middle;
}
.card__title {
    width: 60%;
    display: inline-block;
    vertical-align: middle;
}
.card__copy {
    border: 1px solid #ccc;
    width: 80%;
}
button {
    height: 90%;
    float: right;
}
.cta__group {
    display: inline-block;
}