JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ul">
        <li class="li">
            <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
            <div class="text">
                <p class="date">
                    12 06 2012
                </p>
                <h4>
                    <a href="" class="title">
                        News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
                    </a>
                </h4>
            </div>
        </li>
        <li class="li">
            <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
            <div class="text">
                <p class="date">
                    12 06 2012
                </p>
                <h4>
                    <a href="" class="title">
                        News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
                    </a>
                </h4>
            </div>
        </li>
    </ul>

CSS

.ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.li {
  overflow: hidden;
  margin-bottom: 5px;
}
.thumb {
  float: left;
  width: 100px;
  height: 75px;
}
.text {
  margin-left: 120px;
}
.title {
  font-size: 0.9em;
  text-decoration: none;
  font-weight: normal;
}
.title:hover {
  text-decoration: underline;
}