I've been working on a simple form using CSS and HTML, but I'm struggling to add vertical lines to separate my text from the radio buttons. Right now, I'm just using '|' to divide them, but it's not the most visually appealing solution. How can I make sure the vertical lines extend all the way from the top of the text box to the bottom?
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 300px;
height: 20px;
padding: 5px;
border: 1px solid black;
margin: 0;
float: left
}
input[type=radio] {
display: inline;
}
</style>
</head>
<body>
<div class="box1">
<form method="GET" action="." target="new">
Up Down |
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
|
<input type="submit" />
</form>
</div>
</body>
</html>