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-number {margin-left: 2em;}


/* align number right */
    /* RESULT: no discernable (as expected) */
    /*
    .phone-number {text-align: right;}
    */


/* float the number right */
    /* RESULT: pushes number out of box */
    /*
    .phone-number {float: right;}
    */


/* float the number right with a clearfix */
    /* RESULT: number stays in box, but appears on different line */
    /*
    .phone-description {}
    .phone-number {float: right;}
    #phone ul li:after {content: ""; display: table; clear: both;}
    */


/* align right, float description left */
    /* RESULT: works in Chrome, number appears outside of box in Firefox */
    /*
    #phone ul li {text-align: right;}
    .phone-description {float: left;}
    */


/* absolute position number */
    /* RESULT: ugly text collisions */
    /*
    .phone-number {position: absolute; right: 0;}
    */


/* justify spans (see http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs) */
    /* RESULT: no discernable change */
    /*
    #phone ul li {text-align: justify;
                  -ms-text-justify: distribute-all-lines;
                  text-justify: distribute-all-lines;}
    .phone-description, .phone-number {display: inline-block; *display: inline; zoom: 1;}
    #phone ul li:after {content: ''; width: 100%; display: inline-block; font-size: 0; line-height: 0}
    */