Check out the code snippet below:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
When I implement this code, I observe:
https://i.sstatic.net/S5UqP.png
https://i.sstatic.net/EceXs.png
I want the name to display in a single line even if it extends beyond the cell, while the button should always remain inside the cell on the same line as the name. If the name is short, the button should appear next to it, but for longer names stick to the right side of the cell.
Although I used absolute positioning, the button consistently aligns with the right side of the cell which is not desired for short names.
Therefore, I aim for the result shown in the picture for long names, while for short names, I prefer the yellow button to be displayed beside the name rather than adhering to the right side.
Here is the working jsfiddle link: https://jsfiddle.net/8kchkucv/
My question is, can this be achieved solely using CSS?