css form input side by side with labels

Question

here again! I'm building a form and i want to put some input elements side by sade to save space, but i'm having a bit of problem to put the labels and the input boxes in the correct spots.

here's the html so far:

<form id="clientForm" method="post" action="formProcess.php" >
    <fieldset >
        <div id="errorDiv"></div>
        <label for="name">*Nome: </label>
        <input type="text" id="name" name="name" placeholder="Nome do cliente" />
        <span class="errorFeedback errorSpan" id="nameError">Nome é obrigatório.</span>
        <br />
        <label for="phone1">*Telefone 1: </label>
        <input type="text" id="phone1" name="phone1" />
        <span class="errorFeedback errorSpan" id="phone1Error">Pelo menos um numero de contato é necessario.</span>
        <br />
        <label for="phone2">Telefone 2: </label>
        <input type="text" id="phone2" name="phone2" />
        <br />
        <label for="name">E-mail: </label>
        <input type="text" id="email" name="email" placeholder="E-mail" />
        <span class="errorFeedback errorSpan" id="emailError">Formato de e-mail : "user@email.com"</span>
        <br />
        <label for="clientType">Tipo de cliente: </label>
        <input class"radioButton" type="radio" name="clientType" id="jur" value="jur" checked="checked"/>
        <label class="radioButton" for="clientType">Jurídico</label>
        <input class"radioButton" type="radio" name="clientType" id="fis" value="fis" />
        <label class="radioButton" for="clientType">Físico</label>
        <label for="doc" id="docLabel">CNPJ: </label>
        <input type="text" id="doc" name="doc" />
        <hr />
        <p>
            Endereço
        </p>
        <label for="cep">CEP: </label>
        <input type="text" name="cep" id="cep" onblur="consultacep(this.value)"/>
        <br />
        <label for="street">Logradouro: </label>
        <input type="text" id="street" name="street" placeholder="Logradouro"/>
        <label for="number">Número: </label>
        <input type="text" id="number" name="number" placeholder="123"/>
        <label for="addAddress">Complemento: </label>
        <input type="text" id="addAddress" name="addAddress" placeholder="Complemento"/>
        <br />
        <label for="city">Cidade: </label>
        <input type="text" name="city" id="city" />
        <label for="state">UF: </label>
        <select name="state" id="state">
            <?php
                foreach ($estados as $value => $name) {

                    echo '<option value="' . $value . '">' . $name . '</option>';
                }
            ?>
        </select>

        <label for="payDate">Data preferida de pagamento: </label>
        <input type="date" name="payDate" id="payDate" />
    </fieldset>
</form>

and the css:

fieldset {
    border: 5px solid #5E8A8A;
    font-family: Arial, Helvetica, sans-serif;
    color: #002447;
    font-size: 1.2em;
    margin-top: 3%;
    margin-bottom: 5%;
    padding: 0.2em;
    background-color: #5E8A8A;
    display: inline-block;
}


fieldset label{
    width: 8em;
    margin-right: 1em;
    float: left;
    text-align: right;
    display: inline-block;
}
fieldset input {
    width: 20em;

}

.radioButton {
    width: 1.5em;
    margin-right: 0.2em;
    margin-left: 0.2em;
    float: none;
    text-align:center;

}



.errorClass {
    background-color: #CC6666;
}

#errorDiv {
    color: red;
}

.errorFeedback {

}

#phone1, #phone2{
    width: 10em;
}

.sideLabel{
    width: 8em;
    margin-right: 0.2em;
    float: left;
    text-align: right;
    display: inline-block;
}

to wixh i get the result:

any ideas?(new to css, so sorry for the basic question)

Answer 1

Don't use <br> for breaking the lines, use <p> or even

<ul>
  <li></li>
</ul>

Also, <fieldset> is for defining the section of your form, so it looks like you should start a new fieldset before 'Endereço' instead of using the <p>