I have an HTML list with a span tag on each list item that stretches when the text inside the list gets wrapped to the next line. I've seen answers suggesting align-items:flex-start but it does not seem to work.
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit tempor incidi</a><span></span></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur</a><span></span></li>
</ul>
ul {
background: black;
width: 300px;
padding: 20px;
}
ul a {
color: white;
text-decoration: none;
}
ul li {
display: flex;
align-items: baseline;
border-bottom: 1px solid white;
padding: 10px 0;
}
ul li span {
order: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
display: block;
margin-left: auto;
}
