Create a form with two input fields for city/town and postal code.

by Rolf

HTML

<div class="form-row">
	<div class="form-field expand" style="--chars: 20">
		<label for="locality">City/Town:</label>
		<input id="locality"/>
	</div>
	<div class="form-field" style="--chars: 5">
		<label for="postal-code">Postal code:</label>
		<input id="postal-code"/>
	</div>
</div>

CSS

* { box-sizing: border-box }

.form-row {
	display: flex;
	flex-flow: row wrap;
	gap: 1em 2em;
}

.form-field {
  --border: 3px;
  --letterspace: 3px;
  --pad-x: 0.2em;
	font: 2em/1 'Courier New', monospace;
  --field-width: calc( var(--chars)      * 1ch 
                    + (var(--chars) - 1) * var(--letterspace)
                    + 2*(var(--pad-x) + var(--border)));
  flex: 0 0 var(--field-width);
}
.form-field.expand {
  flex: 1 1 var(--field-width);
}
.form-field label {
  font: bold 1rem sans-serif;
}
.form-field input {
	padding: 0.1em var(--pad-x);
  font: inherit;
	width: 100%;
  border: var(--border) solid #000;
  border-radius: calc(2*var(--border));
  background-color: white;
  letter-spacing: var(--letterspace);
}
.form-field input:focus {
  outline: black solid 2px;
}
.form-field input#locality {
  text-transform: uppercase;
}