How to get labels and textboxs side by side in correct format in Mvc4

Question

Here is my code

<div>
                @Html.LabelFor(u => u.CompanyName)
                @Html.TextBoxFor(u => u.CompanyName)
                @Html.ValidationMessageFor(u => u.CompanyName)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Address1)
                @Html.TextBoxFor(u => u.Address1)
                @Html.ValidationMessageFor(u => u.Address1)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Adderss2)
                @Html.TextBoxFor(u => u.Adderss2)
                @Html.ValidationMessageFor(u => u.Adderss2)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.City)
                @Html.TextBoxFor(u => u.City)
                @Html.ValidationMessageFor(u => u.City)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.State)
                @Html.TextBoxFor(u => u.State)
                @Html.ValidationMessageFor(u => u.State)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Country)
                @Html.TextBoxFor(u => u.Country)
                @Html.ValidationMessageFor(u => u.Country)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.ContactPerson)
                @Html.TextBoxFor(u => u.ContactPerson)
                @Html.ValidationMessageFor(u => u.ContactPerson)
            </div>
            <br />

Here labels and textboxs are not coming in proper order in mvc like (table format in asp.net) Based on their sizes they are adjusting side by side .. plz can u suggest me how we can adjust side by side all labels and textboxs in proper way

Answer 1

Add your code inside a div container

<div id="alignform">
           <div>
                @Html.LabelFor(u => u.CompanyName)
                @Html.TextBoxFor(u => u.CompanyName)
                @Html.ValidationMessageFor(u => u.CompanyName)
            </div>
            // rest of your code
<div>

Finally add style tags in html page

<style>
    #alignform label {
        width: 300px; //adjust yourself according to contents
        display:inline-block;
    }
</style>