-1
Good morning, I need to align the two date fields that are below with the two top fields. What’s the best way to do this?
According to the image, when I give margin left auto no span it is not exactly below. How would I line up? Thank you very much
<select id="slcGrafico" style="width:260px; " onchange="chgOpcaoGrafico()" class="browser-default custom-select">
<option value="1" selected>Comparar com o dia</option>
<option value="5">Comparação média</option>
<option value="2">Busca amostragem
<option value="3">Origem x Destino</option>
<option value="4">Estudante x Passe Livre</option>
</select>
<div style="display: flex;float: right;margin-left: 10px; " id="inputGrafico">
<input id="valorFiltroGrafico1" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
<input id="valorFiltroGrafico2" type="date" value="2020-01-12" style="margin-left:5px;height: calc(2.25rem + 2px);">
</div>
<div style="display: flex;margin-top:3px; " class="row">
<span style="margin-left: auto;" >
<input id="valorFiltroGrafico3" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
<input id="valorFiltroGrafico4" type="date" value="2020-01-12" style="margin-left:5px;height: calc(2.25rem + 2px);">
</span>
</div>
Why not create a structure that places the elements within Divs with the same dimensions so that they are aligned correctly? for example: https://pasteboard.co/JO0WSuO.png
– Ricardo Pontual
It would be nice if you used the bootstrap grid classes to maintain the alignment you want or also create your own grid. How to grid: <a href="https://www.youtube.com/watch?v=HN1UjzRSdBk">Unraveling the CSS Grid in practice | Mayk Brito</a>
– Erick Santos