Как выровнять блоки на один уровень?

Question

[Pavel_Proca]

Нужно сделать вот так:



Но у меня не получается сделать 2 блока вровень. Вот скрин того что у меня на данный момент есть (потом и код кину):

<div class="wrapper">
	<div>
		<div class="content content-1">
			<img class="flag-1">
			<p>MDL</p>
		</div>

		<div class="content">
			<input type="text">
		</div>
	</div>

	<div>
		<div class="content content-1">
			<img class="flag-1">
			<p>MDL</p>
		</div>

		<div class="content">
			<input type="text">
		</div>
	</div>

</div>

* {
	margin: 0;
	padding: 0;
	color: #2e7089;
	text-transform: uppercase;
}

.wrapper {
	max-width: 1000px;
	margin: 10px auto;
	text-align: center;
}

.content, .content-1 {
	height: 50px;
	width: 284px;
	display: inline-block;
	border: 2px solid #00aeef;
	background: #b8ecff;
}

.content-1 {
	height: 50px;
	width: 45px;
}

img {
	width: 27px;
	height: 17px;
}

.flag-1 {
	background: url(flags.png) no-repeat;
	background-position: 0px 0px;
}

input {
	width: 100%;
	height: 100%;
	border: none;
	background: #b8ecff;
	font-size: 35px;
}

Answer 1

[Дима Паутов]

.content, .content-1 {
  height: 50px;
  width: 284px;
  display: inline-block;
vertical-align: middle; /* Делов то */
  border: 2px solid #00aeef;
  background: #b8ecff;
}

https://jsfiddle.net/2euk3re3/1/