Your feedback has been invaluable in shaping the response to your queries.
Initially, there were discrepancies in your HTML structure. The nested list was incorrectly formatted, which I have rectified in this updated answer for you.
Addressing your initial question...
How can I align the prices at the baseline?
Utilizing absolute positioning offers a solution without compromising the responsiveness of your price card across various browsers and devices. It adapts seamlessly within its containing element. Testing your code is crucial to ensure its functionality.
Keep in mind that for position: absolute to function correctly, the parent element must be set to position: relative. This ensures that the absolutely positioned element moves relative to its closest positioned ancestor (e.g., the li in this case). Without a positioned ancestor, it defaults to positioning relative to the <body>. Therefore, remember:
To position a child element absolutely, designate the parent element as position: relative.
Below is an illustration integrating your code.
DEMO
https://i.sstatic.net/4dZw3.png
HTML
<!-- Corrected with adjustment to nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappuccino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Caramel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* Based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display : inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
Regarding your second query...
Why isn't relative positioning effective?
In reality, relative positioning is functioning properly. In the normal flow of content, it aligns appropriately within the layout. The line breaks occurring in your description are due to the constrained margin settings in your span.
Nonetheless, the em element can still be adjusted using position: relative. Experiment with different values apart from 0. By altering these values, your prices will collectively shift up or down based on positive or negative inputs.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* Experiment with these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For further insights into positioning techniques, refer to the position article on MDN.