Html form layout

Html form layout with two fields in side by side.

I have created a website html based form with two columns in which labels and input fields are set side by side. this is one way of doing it and hope this is helpful, it also includes basic css styles to make form look good.

This form contains:

  • Label
  • Input text field
<style>
    body {
        margin-top: 10%;
    }

    p {
        text-align: right;
        float: left;
        margin-right: 2%;
        margin-left: 2%;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size-adjust: inherit;
        padding-right: 10%;
    }


    input {
        border: solid rgb(206, 206, 206);
        border-width: 2px;
        border-radius: 3px;
        width: 50%;
        height: 7%;
        margin-top: 2%;
        margin-bottom: 2%;
        margin-left: 7%;
        padding-left: 3%;
        font-size: 15px;
        font-size-adjust: inherit;

    }
</style>

<body>
    <p>
        <label for="date">Date</label>
        <input id="date" name="user[date]" type="text" /><br>
        <label for="workinghours">Working Hours</label>
        <input id="workinghours" name="workinghours" type="text" /><br>
        <label for="depositedmoney">Deposited Money</label>
        <input id="depositedmoney" name="depositedmoney" type="text" />
    </p>

    <p>
        <label for="name">Working Hours</label>
        <input id="name" name="name" type="text" /><br>
        <label for="name">Pay per Hour</label>
        <input id="name" name="name" type="text" /><br>
        <label for="username">Actual Pay</label>
        <input id="username" name="username" type="text" />
    </p>
</body>