JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li>
      <a href="/home/">
        <span class="icon"></span>
        <span>This is the home page of this site</span>
      </a>
    </li>
    <li>
      <a href="/contact/">
        <span class="icon"></span>
        <span>This is another page</span>
      </a>
    </li>
</ul>

CSS

.nav { width:280px;}
.nav li {
	display:table-cell;
  border:1px solid blue;
  vertical-align: middle;
}
.nav a {
    text-transform: uppercase;
    border:1px solid green;
    white-space: nowrap;
    display:block;
}
.nav li a span {
    vertical-align: middle;
    display: inline-block;
    white-space: normal;

}
.nav li a span.icon {
    background: url("http://lorempixel.com/25/25/") no-repeat;
    width:25px;
    height:25px;
    margin:0 10px 0 0;
}