Einfach mal das Browserfenster vergrößern und verkleinern 😉
<!doctype html>
<html>
<style>
fieldset {
margin-top: 1rem;
border: 2px solid gray;
}
legend {
font-weight: bold;
border: 2px solid gray;
}
label {
display: block;
float: left;
margin-right:2rem;
margin-top: .2rem;
}
label span {
display: inline-block;
width: 8rem;
white-space: nowrap;
}
@media only screen {
label[x-required] span::after {
content: ' *) ';
}
}
</style>
<form>
<fieldset><legend>Mindestangaben:</legend>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
</fieldset>
<fieldset><legend>Optionale Angaben:</legend>
<label><span>Gib noch was ein:</span>
<input>
</label>
<label><span>Gib noch was ein:</span>
<input>
</label>
<label><span>Gib noch was ein:</span>
<input>
</label>
</fieldset>
</form>
</html>