To set things in the right direction, a couple of quick adjustments were made. Eliminating several rows from the form simplified the code.
The .row-tab divs now have a display of flex, allowing them to span the entire width of the form and making the left/right divs flexible and sit side by side simultaneously.
.row-tab {
display: flex;
}
Next, a rule was added for .left-tab:
.left-tab {
flex-grow: 1; // ensures the left side expands to fill any remaining space
text-align: right; // aligns the text
}
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
font-family: Raleway,Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.2em;
}
.container {
background-color: cornflowerblue;
}
#title {
display: block;
text-align: center;
padding: 10px;
margin-bottom: 10px;
font-weight: bold;
}
#survey-form {
background-color: #eeeeee;
width: 80%;
margin:0 auto;
border-radius: 4px;
padding: 10px;
}
#description {
display: block;
text-align: center;
padding: 15px;
font-size: 1em;
}
.row-tab {
display: flex;
}
label {
display: inline-block;
text-align: right;
width: 40%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
}
.left-tab {
flex-grow: 1;
text-align: right;
}
.right-tab {
display: inline-block;
width: 58%;
height: 20px;
text-align: left;
padding: 15px;
margin-left: 10px;
}
#submit-btn{
width:100px;
height: 50px;
background-color: rgb(61, 138, 240);
color: black;
padding: 10px;
margin-top: 15px;
text-align: center;
border:4px solid rgb(61, 58, 224);
border-radius: 5px;
}
.submit-btn{
text-align: center;
}
<body>
<div class="container">
<div id="title">
<h1>Survey Form</h1>
</div>
<div>
<form id="survey-form" action="get">
<div id="description">
<p>Share your thoughts on enhancing FreeCodeCamp</p>
</div>
<div class="form-body">
<div class="row-tab">
<div class="left-tab">
<label for="name">*Name</label>
</div>
<div class="right-tab">
<input type="text" id="name" required placeholder="Your name">
</div>
</div>
<div class="row-tab">
<div class="left-tab">
<label for="email">*Email</label>
</div>
<div class="right-tab">
<input type="email" id="email" required placeholder="Your email">
</div>
</div>
<div class="row-tab">
<div class="left-tab">
<label for="age">*Age</label>
</div>
<div class="right-tab">
<input type="number" id="number" required placeholder="Your age">
</div>
</div>
<div class="submit-btn">
<button id="submit-btn">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>