Inline-block elements not properly vertically-aligned

See more:

CSS

HTML

Hi,

I have a row element which contains several inline-block elements. The problem is that I can't add padding or margin to any because the margin itself overflows. I'd like all elements to be perfectly aligned vertically.

Here's an image of the issue:
here[^]

HTML:

<div id='content'>
	<div class='row'>
		<span class='label'>Alerts</span>
		<div class='checkbox'>
			<div class='checkbox_inner'></div>
		</div>
		<span class='label checkbox_label'>Enable Email Alerts</span>
	</div>
</div>

CSS affecting these elements:

body
{
	color: white;
	margin: 0;
	font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

#content
{
	width: 100%;
	height: calc(100% - 48px);
	background: linear-gradient(180deg, rgb(30,40,45), black);
	color: rgb(150,155,160);
	position: absolute;
}

.inline_textbox
{
	display: inline-block;
}

.row
{
	margin: 8px 0;
}

.row:after
{
	clear: both;
}

.label
{
	width: 200px;
	display: inline-block;
}

.checkbox
{
	display: inline-block;
	border-radius: 2px;
	border: 1px solid rgb(80,100,120);
	transition: border-color 0.3s;
	cursor: pointer;
}

What I have tried:

Mentioned in question
----------------------