Emulate Name/Value Table

Use a list to emulate a table with name column auto-size (incl max-width) and value column filling the remaining space. Support overflow: ellipsis

by sstur

HTML

<div class="container">
    <div class="float-outer">
        <div class="float-inner">
            Run<br/>
            Options<br/>
            Languages<br/>
            Collaboration<br/>
            Legal and Credits
        </div>
        <div class="list">
            <div class="list-item">
                <div class="name">Run</div>
                <div class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dui nec enim vulputate, vel hendrerit nibh condimentum. Sed semper, felis at mollis laoreet, dolor nibh tempor elit, a sollicitudin nibh neque ac dui. Vestibulum commodo vestibulum cursus.</div>
            </div>
            <div class="list-item">
                <div class="name">Options</div>
                <div class="value">In ut odio vel velit sollicitudin bibendum non cursus tellus. Vivamus aliquam nisi dui, in vestibulum lorem consectetur eget.</div>
            </div>
            <div class="list-item">
                <div class="name">Languages</div>
                <div class="value">In magna enim, placerat id tincidunt id, ornare et orci. Donec laoreet nibh ac libero venenatis, sit amet interdum est faucibus.</div>
            </div>
            <div class="list-item">
                <div class="name">Collaboration</div>
                <div class="value">Vestibulum convallis, elit vitae dapibus sagittis, felis libero consectetur mauris, quis condimentum massa ligula at purus.</div>
            </div>
            <div class="list-item">
                <div class="name">Legal and Credits</div>
                <div class="value">Curabitur consequat finibus tortor, eget scelerisque turpis feugiat vel. Nulla a luctus quam. Etiam augue augue, rutrum pretium pretium eget, ullamcorper ut tortor. Ut mollis dui quis ultrices aliquam. Duis sit amet lorem ultricies, aliquet augue in, cursus metus.</div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    width: 400px;
}
.container:after {
    content: "";
    display: block;
    clear: both;
}
.float-outer {
    float: left;
    position: relative;
}
.float-inner {
    float: left;
    max-width: 90px;
    max-height: 0;
    white-space: nowrap;
    visibility: hidden;
}
.list {
    position: absolute;
    width: 100%;
}
.list-item {
    width: calc(400px - 100%);
    position: relative;
    left: 100%;
}
.list-item:after {
    content: "";
    display: block;
    clear: both;
}
.list .name {
    white-space: nowrap;
    position: absolute;
    left: calc(100% - 400px);
    max-width: calc(400px - 100%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list .value {
    padding-left: 10px;
}