兄弟要素の意味。方法。

main-right-left,main-right3を兄弟要素にするやり方がわかりません。

HTML
1<!DOCTYPE html>
2<html lang="ja" >
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <title></title>
7  </head>
8  <body>
9    <div class="wrapper">
10      <div class="header"></div>
11      <div class="main clearfix">
12        <div class="main-left"></div>
13        <div class="main-right clearfix">
14          <div class="main-right-left">
15            <div class="main-right1"></div>
16            <div class="main-right2"></div>
17          </div>
18          <div class="main-right3"></div>
19          <div class="main-right4"></div>
20        </div>
21      </div>
22    <div class="footer"></div>
23    </div>
24  </body>
25</html>

CSS
1.wrapper{
2  margin: auto;
3  width: 400px;
4}
5
6.header{
7  background-color: #141f40;
8  height: 100px;
9}
10
11.clearfix::after {
12  content: "";
13  display: block;
14  clear: both;
15}
16
17.main-left{
18  background-color: #80bfa8;
19  width: 150px;
20  height: 250px;
21  float: left;
22}
23
24.main-right-left{
25  height: 150px;
26  width: 150px;
27  float: left;
28}
29
30.main-right{
31  float: left;
32  width: 250px;
33}
34
35.main-right1{
36  background-color: #dbd400;
37  width: 150px;
38  height: 50px;
39  float: left;
40}
41
42.main-right2{
43  background-color: #0093b7;
44  width: 150px;
45  height: 100px;
46  float: left;
47}
48
49.main-right3{
50  background-color: #ff9e6b;
51  width: 100px;
52  height: 150px;
53  float: right;
54}
55
56.main-right4{
57  background-color: #8c2727;
58  width: 250px;
59  height: 100px;
60  float: right;
61}
62
63.footer{
64  background-color: #d98d30;
65  height: 100px;
66  width: 400px;
67}
68