JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heading"> 
    <div class="mytext">
        <span> some icon here</span>
         <span>some text here</span>
    </div>

    <div class="button">Go</div>
</div>

CSS

.heading {
    background-color: tomato;
}
/* clear fix */
 .heading::after {
    content:"";
    display: block;
    clear: both;
}
.heading .mytext {
    height: 20px;
    float: left;
    
    padding-bottom: 10px;
    padding-top: 10px;
}

.heading .mytext * {
}

.heading * {
    color: beige;
}
.button {
    float: right;
    padding: 10px;
    height: 20px;
    background-color: firebrick;
}
/* my attempt to align */
 .heading::before {
    content:"";
    height: 100%;
    width: 0px;
    display: inline-block;
    vertical-align: middle;
}