Why is it so challenging to create a two-column form layout using CSS?
All I'm trying to achieve is:
Name: John Smith
Age: 25
Description: A long text that should wrap if it exceeds the border, while still aligning with the first line.
Location: Los Angeles
Below is my HTML code (with some embedded Razor):
<div class="section">
<label>Name:</label>
<span>@person.Name</span>
<label>Age:</label>
<span>@person.Age</span>
<label>Description:</label>
<span>@person.Description</span>
<label>Location:</label>
<span>@person.Location</span>
</div>
Here is my CSS code:
.section
{
padding: 5px;
border-radius: 7px;
border: 1px solid #aaa;
margin:0 auto;
}
.section label
{
display:block;
font-weight:bold;
text-align:right;
width:50%;
float:left;
}
.section span
{
display:block;
text-align:left;
width:50%;
float:right;
}
Although this setup almost works, there are issues with the border collapsing and strange wrapping below the form.
What could be causing these problems?
Thank you in advance.