JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<!-- building http://gyazo.com/be86a6156b56f985e555d0c781b536d8 for Hugh -->

<div class="moment-bm">
      <div>
          <img alt="Social-cap-bm" class="moment-img" src="/assets/social-cap-bm.png">
          <span class="moment-avatar">
               <img alt="9e5e5e786d363308cc8abc38254da414_48x48" src="//d1c1qrnexsp66u.cloudfront.net/users/images/9e5e5e786d363308cc8abc38254da414_48x48.png">
          </span>
          <p class="moment-bm-text">
              <a href="/highlights/5747220963917824" class="moment-title-link">Bobby Gruenewald highlighted <b>Revelation 2:2</b></a>
          </p>
      </div>
      <p class="moment-verse" data-usfm="[&quot;REV.2.2&quot;]" data-version-id="111">blah blah</p>
</div>

CSS

.moment-img {display:none;}

.moment-bm div {
    overflow:hidden;
    border:2px solid red;
}

.moment-avatar {
    float:left;
}

.moment-bm-text {
    float:left;
    padding-left:10px;
}
.moment-bm-text b {
    display:block;
}

.moment-verse {
    clear:both;
    padding:10px;
    background:#eee;
    margin: 35px 10px;
    border:2px solid pink;
}