JSFiddle - React, Tailwind, and code Playground
HTML
<ol class="transaction-history-list">
<li>
<div>Created in Starting Activity and assigned to Some User.</div>
<aside>
<span>Some User</span>
<time>5/25/2011 10:52 PM</time>
</aside>
</li>
<li>
<div>Created in Starting Activity and assigned to Some User.</div>
<aside>
<span>Some User</span>
<time>5/25/2011 10:52 PM</time>
</aside>
</li>
<li>
<div>Created in Starting Activity and assigned to Some User.</div>
<aside>
<span>Some User</span>
<time>5/25/2011 10:52 PM</time>
</aside>
</li>
</ol>
CSS
.transaction-history-list {
list-style:none;
border-bottom:1px solid #ccc;
padding:0 0 5px 0;
margin:0;
}
.transaction-history-list li {
padding:5px 0 0 0;
margin:5px 0 0 0;
border-top: 1px solid #ccc;
overflow:hidden;
padding-left:250px; /* Width of aside (width+padding+margin+border) */
}
.transaction-history-list li > aside {
position:relative;
float:left;
width:250px;
right:250px; /* Width of aside (width+padding+margin+border) */
margin-left:-100%;
}
.transaction-history-list li > div {
position:relative;
float:left;
width:100%;
padding-bottom:10000px;
margin-bottom:-10000px;
margin-left:-10px; /* Left padding + left border */
padding-left:10px;
}
.transaction-history-list time {
display:block;
color: #999;
font-size: .8em;
}