Inline flex added for input boxes not responsive - html

Question

I've been trying to a series of input boxes to be inline but also to be responsive such that it does not get overlapped on the row below.
When shrinking the contents gets overlayed on top of div directly below and not sure how to fix this
/** Editable **/
.container {
display: block;
margin: auto;
}
/** Not editable onwards **/
.multiple-choice--small {
height: 24px;
padding: 2px 10px 0 36px;
}
.full {
float: left;
width: 100%;
}
.quarter,
.one-quarter {
float: left;
width: 25%;
}
.third,
.one-third {
float: left;
width: 33.33333%;
}
.form-group {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
margin-bottom: 15px;
}
input[type=number] {
-moz-appearance: textfield;
}
.form-date .form-group {
float: left;
width: 50px;
margin-right: 20px;
margin-bottom: 0;
clear: none;
}
.form-date .form-group label {
display: block;
padding-bottom: 2px;
}
.form-date .form-group input {
max-width: 100%;
}
.form-date .form-group-year {
width: 70px;
}
.form-group-error {
margin-right: 15px;
border-left: 4px solid #b10e1e;
padding-left: 10px;
}
#media (min-width: 641px) {
.form-group-error {
border-left: 5px solid #b10e1e;
padding-left: 15px;
}
}
.form-control-error {
border: 4px solid #b10e1e;
}
.error-message {
font-family: "nta", Arial, sans-serif;
font-weight: 700;
text-transform: none;
font-size: 16px;
line-height: 1.25;
color: #b10e1e;
display: block;
clear: both;
margin: 0;
padding: 2px 0;
}
<div class="container">
<div class="full" style="padding-top:10px;">
<div class="one-quarter"><span style="font-weight:bold"> t </span></div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<label> Input A </label>
<div class="form-group">
<div class="form-date" >
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control">
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control" >
</div>
</div>
</div>
</span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<div> Input B </div>
<div class="form-group" >
<div class="form-date" style="background: blue;">
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control">
</div>
</div>
</div>
</span>
</div>
</div>
<div class="full">
<div class="one-quarter"> </div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio A</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio B</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
</div>
</div>
Full screen:
Responsive:
Edit: Added JSFiddle: https://jsfiddle.net/Ducking/0n8cdvtx/13/

Answer 1

Use the flex property on the dates class.