JSFiddle - React, Tailwind, and code Playground

by ackernaut

HTML

<div class="item">
    <div class="item-content name">Terrence Robertson</div>
    <div class="item-content date">11/15/13 @ 11pm</div>
</div>

<div class="item">
    <div class="item-content name">Jerry</div>
    <div class="item-content date">11/15/13 @ 11pm</div>
</div>

<div class="item">
    <div class="item-content name">Jerry the Seabass</div>
    <div class="item-content date">11/15/13</div>
</div>

<div class="item expanded">
    <div class="item-content name">Terrence Robertson</div>
    <div class="item-content date">11/15/13 @ 11pm</div>
</div>

<div class="item expanded">
    <div class="item-content name">Jerry</div>
    <div class="item-content date">11/15/13 @ 11pm</div>
</div>

<div class="item expanded">
    <div class="item-content name">Jerry the Seabass</div>
    <div class="item-content date">11/15/13</div>
</div>

<div class="item">
    <div class="item-content name">John Lee</div>
    <div class="item-content date">11/15/13</div>
</div>

<div class="item expanded">
    <div class="item-content name">John Lee</div>
    <div class="item-content date">11/15/13</div>
</div>

CSS

.item {
    border-bottom: 1px solid #ddd;
    clear: both;
    display: block;
    font-size: 16px;
    height: 24px;
    line-height: 24px;
    max-width: 320px;
    min-height: 24px;
    overflow: hidden;
    padding: 0 0 16px;
    width: 30%;

    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}

.item-content {
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.name {
    /* Define */
}

.date {
    text-align: right;
}

.expanded {
    height: auto;
}

.expanded .item-content {
    height: auto;
    text-overflow: clip;
    white-space: normal;
}