Коробки не выравниваются должным образом

Question

У меня 3 коробки разных размеров.Я хочу выровнять их так:

Но все, что я получаю, это:

Я хочу создатьВеб-сайт темы windows metro, пожалуйста, помогите.

header {
	background: url(./bg/bg1.png) 50% 50% no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
}
.box {
	display: inline-block;
	margin: 5px;
	text-align: center;
}
.box img{
	max-width: 40%;
	margin-top: 5px;
	margin-left: 0px;
}
.menu {
	margin: 5px;
}
.boxes1 .box {
	display: inline-block;
}

 <header>
	<img src="./img/sweb-logo-new-wh1.png">
	<div class="menu">
		<div class="boxes1" style="width: 48%;">
		<a href="#">
			<div class="box" style="background: #3478e5; width: 50%; height: 300px; margin-bottom: -200px;">
				<img src="./img/user.png">
				<p style="margin-top: 100px; color: white;">Korsinička Zona</p>
			</div>
		</a>
		<a href="#">
			<div class="box" style="background: #34e560; width: 40%; height: 330px; margin-top: -500px;">
				<img src="./img/information.png">
				<p></p>
			</div>
		</a>
		<a href="#">
			<div class="box" style="background: #34e560; width: 30%; height: 200px; margin-top: -900px;">
				<img src="./img/information.png">
				<p></p>
			</div>
		</a>		
		</div>
	</div>
</header>

Answer 1

Попробуйте это:

.container {
  display: flex;
}

.left-items {
  display: flex;
  flex-direction: column;
}

.box {
  display: block;
  width: 250px;
  outline: 1px solid black;
  background-color: green;
}

.left-items .blue-box {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 300px;
  background-color: #3478e5;
}

.left-items .pink-box {
  height: 100px;
  background-color: #fc33f3;
}

.right-item .green-box {
  height: 100%;
  background-color:  #34e560;
}

<div class="container">
  <div class="left-items">
    <div class="box blue-box"></div>
    <div class="box pink-box"></div>
  </div>
  <div class="right-item">
    <div class="box green-box"></div>
  </div>
</div>

Answer 2

В качестве общего совета попробуйте извлечь встроенные стили из HTML и перенести их в CSS для лучшего времени.

Попробуйте flexbox.Вероятно, это даже не лучший способ сделать это с flexbox, если кто-то может улучшить.

.container {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
}

.box {
  display: block;
  width: 250px;
  outline: 1px solid black;
  background-color: green;
}

.box.teal {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 300px;
  background-color: #36e5f0;
}

.box.pink {
  height: 100px;
  background-color: #fc33f3;
}

.box.green {
  height: 100%;
  background-color: #8bf221;
}

<div class="container">
  <div class="left">
    <div class="box teal"></div>
    <div class="box pink"></div>
  </div>
  <div class="right">
    <div class="box green"></div>
  </div>
</div>