JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<p>click to show offsetHeight</p>

<h1>#thaiWitter0~2 layout (float)</h1>
<div class="test old">
    <div class="status" onclick="r(this)">
        <div class="picture"></div>
        <div class="inner"><b>short status</b> hello world!</div>
        <div class="clear"></div>
    </div>
    <div class="status" onclick="r(this)">
        <div class="picture"></div>
        <div class="inner"><b>long status</b> hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world!</div>
        <div class="clear"></div>
    </div>
</div>

<h1>#thaiWitter3 layout (absolute)</h1>
<div class="test new">
    <div class="status" onclick="r(this)">
        <div class="content">    
            <div class="picture"></div>
            <div class="inner"><b>short status</b> hello world!</div>
        </div>
    </div>
    <div class="status" onclick="r(this)">
        <div class="content">
            <div class="picture"></div>
            <div class="inner"><b>long status</b> hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world!</div>
        </div>
    </div>
</div>

CSS

.status {
    font: 10pt Verdana, sans-serif;
    padding: 3px 20px;
    background: #ccc;
    color: #000;
}
.status:hover { background: #bbb; }

.picture {
    background: #eee;
    border: 1px solid #aaa;
    width: 24px; height: 24px; margin: 4px;
}

.inner {
    margin-left: 40px;
}

.old .picture {
    float: left;
}

.clear {
    clear: left;
}

.content {
    position: relative;
}

.new .picture {
    position: absolute; top: 0; left: 0;
}

.new .inner {
    min-height: 34px;
}

JavaScript

function r(x) { alert(x.offsetHeight); }