JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
            <div id="phone">
                <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
                <p id="pValue"> 07738689608 </p>
            </div>
            <div id="email">
                <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
                <p id="eValue"> Yusufmustafa1989@gmail.com </p>
            </div>
        </div> <!-- end of footer -->

CSS

#footer {
width:100%;
bottom:0;
background-color:rgba(102,51,255,1);
}

#email {

background-color:rgba(255,255,0,1);}

#phone, #email {
display:inline-block;
width:45%;
    text-align: left;
    vertical-align: middle;
}

#pIcon, #pValue {
display:inline-block;
}

#eValue, #eIcon {
display:inline-block;
}
#email {
    text-align: right;
}