JSFiddle - React, Tailwind, and code Playground

by jquery4u

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<ul>
    <li>
        <div class="media"> <a class="pull-left" href="#">
      <img class="media-object thumbnail" src="http://placehold.it/64x64" />
  </a>

            <div class="media-body">
                 <h4 class="media-heading">Media heading</h4>

                <div class="media-body-left">
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis...</p>
                </div>
                <div class="media-body-right"> <a class="btn" href="#">Button</a>

                </div>
            </div>
        </div>
    </li>
       <li>
        <div class="media"> <a class="pull-left" href="#">
      <img class="media-object thumbnail" src="http://placehold.it/64x64" />
  </a>

            <div class="media-body">
                 <h4 class="media-heading">Media heading</h4>

                <div class="media-body-left">
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis...</p>
                </div>
                <div class="media-body-right"> <a class="btn" href="#">Button</a>

                </div>
            </div>
        </div>
    </li>
        <li>
        <div class="media"> <a class="pull-left" href="#">
      <img class="media-object thumbnail" src="http://placehold.it/64x64" />
  </a>

            <div class="media-body">
                 <h4 class="media-heading">Media heading</h4>

                <div class="media-body-left">
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,...

SCSS

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.media {
    position: relative;
width: 600px;
}

.media-body {
    padding-top: 3px;
}

.media-heading {
    margin: 0;
}
    .media-body-left {
        float: left;
    margin-right: 105px;
    width: 400px;
    font-size:0.9em;
    line-height:1.2em;
    }
    .media-body-right {
        position: absolute;
    width: 100px;
    right: 0;
    text-align: right;
    }

.btn {
    width: 100%;
}