JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<div class="forum-tag-summaries">
<dl class="tags-rows">
<div class="row tags-row">
<div id="tag-wrapper-2" class="tag-wrapper" data-row="0" data-ftg_id="2" data-i="0">
<div class="alert alert-info" id="ui-id-1">
<dt>
<div class="fl" title="Created 1 year ago by Mr Peter GEE">
clinical
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 2
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
Clinical questions relating to medication reviews.
</div>
<div class="edit hidden text-muted">
<textarea data-id="2" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
Clinical questions relating to medication reviews.
</textarea>
</div>
</dd>
</div>
</div>
<div id="tag-wrapper-6" class="tag-wrapper active" data-row="0" data-ftg_id="6" data-i="1">
<div class="alert alert-info" id="ui-id-2">
<dt>
<div class="fl" title="Created 2 days ago by Mr Peter GEE">
nkda
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 1
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
no known drug allergies
</div>
<div class="edit hidden text-muted">
<textarea data-id="6" name="ftg_description"...
CSS
.btn-edit{background-color:transparent;}
dl.tags-rows {
display: table;
height: auto;
}
dl.tags-rows .tags-row {display: table-row;}
dl.tags-rows .tags-row .tag-wrapper {
display: table-cell;
height: 100%;
width: 33%;
min-width: 33%;
padding: 5px;}
.ml-5{margin-left:5px;}
.fl{float:left;}
.fr{float:right;}