JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="comments">
                <li>
                    <span class="title">Perfect Game <b>[thebomb]</b></span>
                    <p>charly - 04-01-2014</p>
                    <p>Description of the comments go here.</p></li>
                <li>
                    <span class="title">Perfect Game <b>[thebomb]</b></span>
                    <p>charly - 04-01-2014</p>
                    <p>Description of the comments go here.</p></li>
                <li>
                    <span class="title">Perfect Game <b>[thebomb]</b></span>
                    <p>charly - 04-01-2014</p>
                    <p>Description of the comments go here.</p></li>
            </ul>

CSS

.comments {
	overflow: hidden;
	width: 355px;
	height: 90px;
	margin: 15px 0px 15px 15px;
	padding: 10px;
	border: 1px dashed #D8D8D8;
	background-color: #f5f5f5; 
    white-space:nowrap;
}
.comments li {
	vertical-align: top;
	display:inline-block;
	width: 340px;
	height: 60px; 
    white-space:normal;
}
.comments .title {
	font-size: 100%;
	color: #3a3a3a; }
.comments .p {
	float: left;
	padding-left: 5px; }