Build a Survey Form formatting

HTML-CSS
1

Tell us what’s happening:
Im finding difficulty in radio buttons and check boxes options alignment. I tried with text-align and margin properties, but cannot find the better way. Please suggest any other ways.

Your code so far

Survey Form

Let us know your expectations further

*Name: 
<div>
  <label  id="email-label" for="email">*Email: </label>
  <input type="email" name="email" id="email" placeholder="name@email.com" pattern="[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,}$" required>
</div>
*Age:
Your current role in the organisation: Select a value Developer Tester support Manager Senior Manager 
     </div>
   <div >
      <label> Gender: </label>
      <input type="radio" name="gender" id="choice1" value="male">
      <label  class="side-tab" for="choice1">Male</label><br>
     <input type="radio"  name="gender" id="choice2" value="female">
      <label class="side-tab" for="choice2">Female</label>
     
      </div>

    <div >
      <label >Are you satisfied with our services?</label>
      <input type="radio" id="choice3" name="feedback" value="satisfied">
      <label for="choice3" class="side-tab"> Satisfied</label>
    <br>
      <input type="radio"  id="choice4" name="feedback" value="not-satisfied">
      <label for="choice4" class="side-tab" > Not Satisfied</label>
    <br>
 <!--      <input type="radio" id="choice5" name="feedback">
      <label for="choice5"> Not Sure</label>-->
    </div>
    
<div>
  <label for="checkbox"> What did you like in the session?</label>
  <input type="checkbox" id="training" value="training" required> 
  <label for="training" class="side-tab"> training </label>
  <br>
  <input type="checkbox" id="hands-on" value="hands-on">
  <label for="hands-on" class="side-tab"> hands-on</label>
    </div>
<br>
    <div>
      <label for="final-feedback">Please provide the suggestions:</label>
      <textarea rows="5" columns="200"> </textarea>
    </div>
 <div>       
 <button type="Submit" id="submit">Submit</button>
  </div>
   </form>

.container{
background-color: cyan;
border-radius: 30px;
width: 900px;
padding:10px;
}
#title,#description{
text-align:center;}
body
{
margin: 50px 70px 0px 300px;

}
label{
margin: 0px 0px 0px 200px;
text-align:left;
width:45%;

}
.side-tab{
margin:0px;
vertical-align: middle;
}
input{
position: relative;
margin-left: 100px;

}
#submit{
font-weight:bold;
margin-left: 400px;
margin-bottom: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36.

Link to the challenge:

2

A simple fix would be making sure to wrap each row with a container divs then give

display:flex to your containers.

Doing so will place its children side by side.