MRE:
.outer-container {
width: 80%;
}
.form-container {
display: flex;
}
.form-container input[type=text] {
width: 50%;
height: 40px;
}
.form-container label {
margin-right: 10px;
}<p>Type in your text (let an AI finish it):</p>
<div class="outer-container">
<div class="form-container">
<div>
<label for="text-input-1">Recipient<br></label>
<input type="text" id="text-input-1" name="text-input-1">
</div>
<div>
<label for="text-input-2">Donor<br></label>
<input type="text" id="text-input-2" name="text-input-2">
</div>
</div>
</div>
<div>
<input type="submit" value="Submit">
</div>CSS (I included outer-container to create a container that should occupy 80% of the page width, however, it seems not to have any effect - whether I use it or not):
I utilized display: flex to align the two boxes horizontally, rather than stacking vertically. Despite setting width: 80%, it appears that more than half of the page's width remains unutilized: https://i.sstatic.net/qqy9H.png