Div’s with input and label on the same line

Question

My situation: I have a form in which the fields are arranged vertically, and with the label aligned to the right and left, as shown in the image below:

I wish to leave at least 2 fields per line for further testing, and there is space on the page to do so. I have made the following changes:

Place display: inline-block, display: inline, float: left one at a time, on the Divs that contain the label and input (divXXX). In all cases, I was unsuccessful, the label is the most difficult to fit. I don’t understand CSS, it was just suggestions I found in researches. Some other solution?

Remarks: I am using Metroui CSS. It is not advisable to use <table> in my case, due to some company restrictions.

HTML

 <div class="conteudoConvenio">
    <div style="width: 100% !important;">
        <fieldset>
                <legend>Formulário</legend>
               <div id="divCPF">
                <label for="txtCPF">CPF:</label>
                <div class="input-control text size4">
                    <input class="text" type="text" name="txtCPF" id="txtCPF" autofocus data-rule-cpf="true" data-rule-required="true" data-inputmask="'mask' : '999.999.999-99'" />
                </div>
            </div>
            <div id="divCNPJ">
                <label for="txtCNPJ">
                    CNPJ:
                </label>
                <div class="input-control text size4">

                    <input class="text" type="text" name="txtCNPJ" id="txtCNPJ" autofocus data-rule-cnpj="true" data-rule-required="true" data-inputmask="'mask' : '99.999.999/9999-99'" />
                </div>
            </div>

           <div class="input-control">
                <input type="submit" class="btn btn-default" value="Enviar" id="btnEnviar" />
            </div>
        </fieldset>
    </div>
</div>

CSS

body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}

div[class^=input-control], #btnEnviar{
margin: 7px;
}

.divTotal{
width: 30%;
float: left;
}  

label[for^=txt] {
text-align: right;
float: left;
width: 10%;
display: inline-block !important;
}

.help-block{
white-space:nowrap;
color: #e51400;
}

.conteudoConvenio {
/*width: 620px !important;
overflow-y:scroll;
overflow-x:hidden;
max-height: 80% !important;*/
width:80% !important;
position: relative;
left: 210px;
bottom: 90px;
}

EDIT: With the response of Felipe Stoker, I was able to leave the Divs in the same line, but the label was again on top as shown in the image below. I tried to change the width of the fields but no progress.

Answer 1

Let me get this straight. Here’s what you can do. Create a div that will count the amount of fields you want and set a maximum width for it, type:

Inside that div, I would create two more Ive daughters, put the same width for them, put float:left, so she’d throw it aside. Ready, inside the daughters Ivs you can put the input and label, just take care of the width of each element.

Example:

 <div class="campoTotal">
    <div class="filho">
        <label></label>
        <input></input>
    </div>
    <div class="filho">
        <label></label>
        <input></input>
    </div>
</div>

Answer 2

Hello, follow my proposal to do this:

HTML

<form>
    <div class="content">
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
    </div>
</form>

CSS

form .content { width:100%; }
form .content .blc { position:relative;float:left;width:33.33333%; }
label { display:block; }
input[type="text"] { display:block; }

Here can be viewed and changed online: http://jsfiddle.net/8dxab5oh/