JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cf">  
    <a class="button float_right" href="/" title=""><span class="txt">LOREM IPSUM</span><span class="icon_1"></span><span class="icon_2"></span></a>
    <a class="button float_right" href="/" title=""><span class="txt">LOREM IPSUM</span><span class="icon_1"></span><span class="icon_2"></span></a>

CSS

* {margin:0;padding:0;}

.button {  
margin-left: 10px;
background: #c00;  
padding: 0 10px;  
color: #fff;  
text-decoration: none;  
text-align: left;  
vertical-align: top;  
font-size: 10px;
}
.txt {
line-height: 20px;
vertical-align: middle;
display:inline-block;
}
.icon_1, .icon_2 {
display: inline-block;
margin-left: 10px;
width: 10px;  
height: 20px;
line-height: 20px;
vertical-align: middle;
background: url(http://placehold.it/10x10) no-repeat left center;
}
.float_right {  
display: inline;  
float: right;  
}  
.cf:before,  
.cf:after {  
content:"";  
display:table;  
}  
.cf:after {  
clear:both;  
}  
.cf {  
zoom:1;  
}