<style>
.container {
width: 100%;
display: flex;
justify-content: space-between;
}
.container .court {
width: 50%;
float: right;
}
.container .inputs {
width: 30%;
}
</style>
</head>
<body>
<h1>Controle su eficiencia de tiro</h1>
<div class="container">
<div class="court">
<img src="./assets/basketballhalfcourtlines_512x.webp" alt="Cancha de basket" >
</div>
<div class="inputs">
<form>
<input id="freeThrow" type="number"><label for="freeThrow"> -- %</label><br>
<input id="leftCorner" type="number"><label for="leftCorner"> -- %</label><br>
<input id="leftWing" type="number"><label for="leftWing"> -- %</label><br>
<input id="center" type="number"><label for="center"> -- %</label><br>
<input id="rightWing" type="number"><label for="rightWing"> -- %</label><br>
<input id="rightCorner" type="number"><label for="rightCorner"> -- %</label><br>
</form>
</div>
</div>
</body>
Buenas gente, estoy teniendo un problema con flexbox y no logro solucionarlo. Estoy intentando alinear horizentalmente mis dos div ( .court y .inputs ), lo hago como usualmente y no entiendo porque no obtengo resultado.
Mi intencion es dejar el titulo centrado y los 2 divs alineados uno al lado del otro, dandole prioridad de espacio a la imagen que al form