JSFiddle - React, Tailwind, and code Playground
HTML
<h1>CSS Prop</h1>
<div class="left actionCell">
<span class="bottom">Header Text</span>
<span class="prop">Header Text</span>
</div>
<div class="left actionCell">10 Selected Items</div>
<h1>jQuery</h1>
<div class="left actionCell">
<span class="bottom" id="js-prop">Header Text</span>
</div>
<div class="left actionCell">10 Selected Items</div>
CSS
.right {
float:right;
}
.left {
float:left;
}
.actionCell {
margin:2px 5px 2px 5px;
border:1px solid Black;
height:200px;
position:relative;
}
.bottom {
position: absolute;
bottom: 0;
}
.prop {
visibility: hidden;
}
h1 {
padding: 5px;
clear: both;
font: bold 1.2em arial;
}
JavaScript
$('#js-prop').parent().css({width: $('#js-prop').width()});