JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article">
    <div class="header">
        <div class="grayBox"></div>

        <span class="main_header">Title</span><br />
        Subtitle
    </div>

    <div class="content">
        Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div>
</div>
    
<div class="article">
    <div class="header">
        <div class="grayBox"></div>

        <span class="main_header">Title</span><br />
        Subtitle
    </div>

    <div class="content">
        Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div>
</div>
<div class="clear"></div>

CSS

.article {
    border-top: 1px dashed black; 
    display: inline-block; 
    width: 250px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    margin-top: 0;
    float:left;        
}

.header {
    height: 50px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-align:right; 
    font-size: 11px;    
}

.main_header {
    font-size: 21px; 
    margin: 0;   
}

.grayBox {
    display: block; 
    width: 80px; 
    height: 50px; 
    float: left; 
    background-color: #cdcdcd; 
    background-position: left center;    
}

.content {
    display:block; 
    background-color: #efefef; 
    height: 75px; 
    padding: 5px; 
    font-size: 12px;
}

.clear {
    clear:both;
}