JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.4/stickyfill.min.js"></script>
<form class="form">
<!-- row -->
row 1
<div class="form__row">
<!-- item -->
<div class="form__item">
<div class="form__group">
<select class="form__select" name="select-child" required>
<option value="">Select 1 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
<div class="form__group">
<select class="form__select" name="select-adult" required>
<option value="">Select 2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
<div class="form__group">
<label class="form__radio">
<input type="radio" name="state" value="yes"><span>Yes</span>
</label>
<label class="form__radio">
<input type="radio" name="state" value="no"><span>No</span>
</label>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="form__item">
<div class="form__group">
<select class="form__select" name="select-child-2" required>
<option value="">Select 1 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
<div class="form__group">
<select class="form__select" name="select-adult-2" required>
<option value="">Select 2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
<div class="form__group">
<label class="form__radio">
<input type="radio" name="state-2" value="yes"><span>Yes</span>
</label>
<label class="form__radio">
<input type="radio" name="state-2"...
SCSS
.form{
&__row{
display: flex;
border: 1px solid #ccc;
}
&__item{
padding: 15px;
}
&__group{
margin-bottom: 10px;
}
&__select{
width: 100%;
display: block;
}
}
JavaScript
// FormData
// row 1
// item 1
// row[0][names][0][select-child]: 1
// row[0][names][0][state]: yes
// row[0][names][0][select-adult]: 1
// item 2
// row[0][names][1][select-child]: 1
// row[0][names][1][state]: no
// row[0][names][1][select-adult]: 1
// row 2
// item 1
// row[1][names][0][select-child]: 1
// row[1][names][0][state]: yes
// row[1][names][0][select-adult]: 1