JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="phone">
<li>
	Phone Category 1
	<ul>
		<li>
            <span class="phone-description">Phone Description 1</span>
            <span class="phone-number">x55555</span>
        </li>
		<li>
            <span class="phone-description">Longer Phone Description 2</span>
            <span class="phone-number">(800) 555-1234 x1701</span>
		</li>
	</ul>
</li>
<li>
	Phone Category 2
	<ul>
		<li>
			<span class="phone-description">Phone Description 3</span>
			<span class="phone-number">x55555</span>
		</li>
		<li>
			<span class="phone-description">Longer Phone Description 4</span>
			<span class="phone-number">(800) 555-1234 x1701</span>
		</li>
	</ul>
</li>
<li>
	Phone Category 3
	<ul>
		<li>
			<span class="phone-description">Phone Description 5</span>
			<span class="phone-number">x55555</span>
		</li>
		<li>
			<span class="phone-description">Longer Phone Description 6</span>
			<span class="phone-number">(800) 555-1234 x1701</span>
		</li>
	</ul>
</li>
</ul>

CSS

body {background: #999;}
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 0; padding: 0.4em 2em 0.4em 1em; white-space: nowrap;}

#phone {position: fixed; top: 0; left: 0;}
#phone li {background: #FFF; position: relative;}
#phone li:hover {background: #CCC;}
#phone ul {display: none; position: absolute; top: 0; left: 100%;}
#phone li:hover ul {display: block;}
#phone li ul li { overflow: hidden; }

.phone-description { float: left; }
.phone-number {float: right;}