I need help creating a list of items with a cross icon in the middle on the right-hand side. I tried using an anchor with padding, floated it to the right, and relatively positioned it. The width and height of the icon are known.
Each item should also have text centered vertically, but the challenge is that the text can vary in length. I want to prevent any overflow or wrapping, ensuring the text does not overlap the icon and extends up to its edge.
Additionally, each item's width should expand to fit its parent while maintaining a fixed height.
For reference, you can view an example here.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>If I remove the -44px;, the issue is clearer, but I'm unsure how to address it. It seems like such a minor problem, but I can't figure it out.
My question is: How can I ensure the cross stays in place without moving down? I want it to always resemble the first div.