Tengo este html:
<form>
<div class="formSorteo">
<label class="labelSorteo">Nombre organizador</label>
<input type="text" name="" id="">
<label class="labelSorteo">Fecha celebracion</label>
<input type="text" name="" id="">
<label class="labelSorteo">Presupuesto</label>
<input type="text" name="" id="">
</div>
</form>
Y este codigo css:
.formCompleto {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
}
.formSorteo {
background-color: #f0f0f0;
padding: 15px;
border-radius: 20px;
display: block;
position: relative;
}
.formSorteo input {
display: inline;
}
.formSorteo label {
display: inline;
position: absolute;
}
Y no se porque se me están juntando los labels con los inputs cuando quiero que los label queden encima de los input algo asi: