JSFiddle - React, Tailwind, and code Playground

HTML

<p class="post-meta">April 7, 2017<span class="share-icons">
        <ul class ="social-icons" style="list-style: none">
          <li class="zocial-twitter"></li>
          <li class="zocial-facebook"></li>
          <li class="zocial-googleplus"></li>
          <li class="zocial-reddit"></li>
        </ul>
        </span></p>

CSS

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
    font-family: 'zocial', sans-serif;
}

.post-title {
    text-align: left;
    font-weight: 700;
}

.post-meta {
    margin-top: 0;
    color: grey;
    font-weight: 700;
    overflow: hidden; 
}

.share-icons {
    float: right;
}

.social-icons li {
    display:inline;
    padding: 5px;
}