JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer" class="clearfix">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />
        <p id="pValue">#</p>
    </div>
    <div id="email">
        <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
        <p id="eValue">#</p>
    </div>
</div> <!-- end of footer -->

CSS

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

#footer {
    bottom:0;
    background-color:rgba(102, 51, 255, 1);
}
#email {
    background-color:rgba(255, 255, 0, 1);
}
#phone, #email {
    float: left;
    width:50%;
}
#pIcon, #pValue {
    display:inline-block;
}
#eValue, #eIcon {
    display:inline-block;
}