Baseline example

by audetwebdesign

HTML

<div class="container">
    <div class="starter-template">
        <ul class='olist'>
            <li>x
                <div class='ibg' style='background-color: #B1BF54'>
                    <div class='im'>
                        <img src='http://placehold.it/32x32/000000/ffffff&text=img' />
                    </div>
                </div>
                <div class='lbl'>Title here</div>
            </li>
        </ul>
    </div>
</div><!-- /.container -->

CSS

body {
    padding-top: 20px;
}
.ibg {
    width: 48px;
    height: 48px;
    display: inline-block;
}
.ibg .im {
    margin: 8px;
}
.olist {
    font-size: 18px;
    font-weight: bold;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    list-style: none;
}
.olist li {
    list-style: none;
    border: 1px dotted gray;
}
.olist .lbl {
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
}