How can I align these two date fields horizontally?-CodePudding

I mean, these two boxes are not aligned horizontally because the labels are not the same size, i want the smaller label to justify to the right, so the boxes could be alingned

https://i.stack.imgur.com/H5FOA.pngstrong[CSS][1]

CodePudding user response：

You can see this example here: https://codepen.io/HMokni/pen/abVOoeJ

label
{
    display: block;
}

label span
{
    display: inline-block;
    text-align: right;
    width: 100px;
}

<form>
    <label>
        <span>Data inicial:</span>
        <input type="date" />
    </label>
    <label>
        <span>Data final:</span>
        <input type="date" />
    </label>
</form>

PS: You can also use flexbox (Flex-end for label and flex-start for inputs) also possible with CSS grid.

CodePudding user response：

One of the simplest ways to achieve this is with the margin-left CSS property, so select your lower element by Id, and play with the margin property:

#second_box_id {
    margin-left: 30px;
}