JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3">
      <div id="d2">
       <div id="d3">
        <div id="d4">
         <a id="d5" href="#">
             <span>Текст со</span><span>&nbsp;</span>ссылкой<span>&nbsp;</span><span>внутри.</span><br><span>В</span><span>&nbsp;</span>пару<span>&nbsp;</span><span>строк.</span>
         </a>
        </div>
       </div>
      </div>
    </div>
</div>

CSS

#main {overflow:hidden;}

#col1,
#col2,
#col3 { height: 300px; float: left; width: 25%; background: red;}

#col2 {background: yellow;}
#col3 {background: white; overflow:hidden;float: none; width: 50%;}
#d2 {float: right; height: 100%;}
#d3 {display: table; height: 100%;}
#d4 {display: table-cell; vertical-align: middle; background: white;}

#d5 {display: block; padding-left: 60px; min-height: 48px;
    background: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/48x48/apps/licq.png") no-repeat left center;
}

#d5:hover {
    background: url("http://cdn1.iconfinder.com/data/icons/Vista-Inspirate_1.0/48x48/apps/licq.png") no-repeat left center;
cursor: pointer;    
}

span {display: inline-block; text-decoration: none; color: black;}

a:hover {color:red;}

/* еще можно внутри выровнять */
#d6 {display: table; height: 100%;}
#d7 {display: table-cell; vertical-align: middle;}