Struggling to align two labels within a div using ASP.NET, where the length of the data displayed can vary.
The challenge I'm facing is getting the first label to align to the left and the second label to the right. Since the data displayed is queried from a database and can change in length, it's causing alignment issues.
Here is the code snippet:
ASP.NET/HTML
<div class="results" id="divResult1" runat="server" visible="false">
<asp:Label ID="lblResult1Desc" runat="server" Text="" CssClass="lblResults1"></asp:Label>
<asp:Label ID="lblResult1Val" runat="server" Text="" CssClass="lblResults2"></asp:Label>
</div>
CSS
.results {
height: 30px;
background-color: #ffffff;
vertical-align: middle;
line-height: 30px;
margin-top: 10px;
border: solid 1px white;
border-radius:10px;
}
.lblResults1 {
font-size: 1.1em;
color: #000000;
float: left;
width: 50%;
margin-left: 10px;
}
.lblResults2 {
font-size: 1.1em;
color: #000000;
float: right;
padding-right: 25px;
width: 50px;
}
In the image provided below, you can see how a long value for the second label (under description B) causes overlap at the end of the div. On the other hand, if there is a short value like in description A, there appears to be excessive white space after it.
https://i.sstatic.net/JwJcL.jpg
Considering that the lengths of descriptions can vary but should easily fit into the available space up to the £ sign, I need assistance with CSS to achieve left-aligned descriptions with some padding and right-aligned values with additional padding.