Tengo el siguiente formulario:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<form class="card-block">
<div class="form-group row card-block">
<label for="optradio" class="col-md-2 col-form-label">Number of Guests</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option1" value="1">1</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option2" value="2">2</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option3" value="3">3</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option4" value="4">4</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option5" value="5">5</label>
<label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option6" value="6">6</label>
</div>
<div class="form-group row card-block">
<label for="lastname" class="col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-5">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-6 col-md-5">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</form>
Y se ve así:
Como se puede observar, los radio, los input y el button están desalineados. Todo esto está dentro de un card-body, aunque es irrelevante porque también sucede si no lo está.
Hay muchas soluciones acá, pero ninguna me funcionó. ¿Alguna idea?