Use relative positioning for the input element and correct the top position of the input, based on the line-height of the element containing the input element.
<!DOCTYPE html>
< html>
< head>
<meta charset="UTF-8">
< title>Align radio button with label on one line</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!–<link rel="stylesheet" href="plain.css">
<script type="text/javascript" src="plain.js"></script>–>
<style>
.radio-container {
box-sizing: border-box;
font-family: ‘Open Sans’, sans-serif;
font-size: 13px;
line-height: 30px;
margin: 0;
outline: 0;
overflow: hidden;
padding: 0;
}
.radio-container input {
box-sizing: border-box;
margin: 0;
outline: 0;
padding: 0;
position: relative;
top: 9px;
vertical-align: top;
}
</style>
< /head>
< body>
<h1>Align radio button with label on one line</h1>
<div class="radio-container">
<input name="red" type="radio" value="red" checked="checked">
red
<input name="green" type="radio" value="green">
green
<input name="blue" type="radio" value="blue">
blue
</div>
< /body>
< /html>