2 column form displaying opening hours
HTML
<!DOCTYPE html>
<body>
<div id='firstColumn'>
<label for='frName'>Franchise Name</label>
<input type="text" name="frName" id="frName" placeholder="Enter franchise name" required tabindex="1" />
<br />
<label for='name'>Your Name</label>
<input type="text" name="name" id="name" placeholder="Joe Blogs" required tabindex="2" />
<br />
<label for='address'>Address</label>
<input type="text" name="addressNo" id="addressNo" placeholder="No" required tabindex="3" />
<input type="text" name="addressStreet" id="addressStreet" placeholder="Street" required tabindex="4" />
<input type="text" name="addressTown" id="addressTown" placeholder="Town/City" required tabindex="5" />
<input type="text" name="addressZIP" id="addressZIP" placeholder="ZIP Code" required tabindex="6" />
<br />
<label for='phone'>Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" required tabindex="7" />
<br />
<input type='submit' />
</div>
<div id='secondColumn'>
<p>Opening Hours</p>
<div>
<label for="Monds">Monday</label>
<input type="text" name="Monds" id="Mon" class="open_hours" value='00:00' required tabindex="8" /> <span>-</span>
<input type="text" name="Monds" id="Monday" class="open_hours" value='00:00' required tabindex="9" />
<hr />
</div>
<div>
<label for="Tues">Tuesday</label>
<input type="text" name="Tues" id="Tue" class="open_hours" value='00:00' required tabindex="10"/>
<span>-</span>
<input type="text" name="Tues" id="Tuesday" class="open_hours" value='00:00' required tabindex="11" />
<hr />
</div>
<div>
<label for="Weds">Wednesday</label>
<input type="text" name="Weds" id="Wed" class="open_hours" value='00:00' required tabindex="12" />
<span>-</span>
<input type="text" name="Weds" id="Wednesday" class="open_hours" value='00:00' required tabindex="13" />
...
CSS
#firstColumn label, #secondColumn p {
color: red;
}
#firstColumn {
width: 50%;
float:left;
}
#firstColumn label, #firstColumn input {
width: 90%;
display:block;
}
#addressNo + input, #addressNo + input + input, #addressNo + input + input + input {
margin-top: 10px;
}
#secondColumn {
float:left;
width: 50%;
}
#secondColumn div {
display:block;
width: 50%;
}
#secondColumn label {
width: 90px;
margin-top: 15px;
}
#secondColumn label:first-of-type {
margin-top: 0;
}
#secondColumn input {
width : 15%;
text-align: center;
float: right;
}
#secondColumn span {
float: right;
}