JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="container">
<li>DRINK MENU</li>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano</span><em>1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato</span><em>10.00</em></li>
    </ul>
</ul>

CSS

ul{ 
    list-style: none;
    padding: 5px;
    margin: 0;
    }
ul#container{
    width: 18%;
    min-width: 200px ;
    max-width: 400px;
    border: 15px solid #886633;
    border-radius: 5px;
    background-color: orange ;
    box-shadow: 4px 4px 8px rgba(0,0,0,.3);
    }
#container  li{
    border-bottom: 1px dashed blue;
    }
#container > li{
    font-size: 2em;
    border-bottom: 1px solid black;
    }
em{
    float: right;
    position: relative;
    bottom: 0px;
}
li:nth-child(3) > em, li:nth-child(5) > em{
    position: relative;
    top:16px;
}
span{
    width: 100px;
    display: inline-block ;
    }