레이아웃 2단 구조를 만드는 방법을 가장 쉽게 하는 방법에 대해서 공유해 드릴까 합니다.
아래 방법은 제가 자주 쓰는 방법 입니다.
자세한 설명은 코드로 애기 하겠습니다.

공통 html layout

<div class="container">
  <section class="item item-a">
    <h1>Section a</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eveniet, nostrum quidem perspiciatis, modi alias necessitatibus, doloremque molestias enim beatae et expedita! Consequuntur quas dicta a possimus, sit optio nesciunt.</p>
  </section>
  <section class="item item-b">
    <h1>Section a</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eveniet, nostrum quidem perspiciatis, modi alias necessitatibus, doloremque molestias enim beatae et expedita! Consequuntur quas dicta a possimus, sit optio nesciunt.</p>
  </section>
  
</div>
<footer>footer</footer>

2단 구조 float 사용하기

body {
  margin: 0;
  font-size: 2em;
}
h1, p { margin: 0; }
.container {
  background: pink;
}
.container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.item {
  float: left;
  padding: 5%;
}
.item.item-a {
  width: 30%;
  background-color: blue;
}
.item.item-b {
  width: 50%;
  background-color: red;
}
footer {
  clear: both;
  background-color: gray;
}

2단구조 display: inline-block

body {
  margin: 0;
  font-size: 2em;
}
h1, p { margin: 0; }
.container {
  font-size: 0;
  margin: 0 auto;
  max-width: 1000px;
}

.item {
  vertical-align: top;
  font-size: 1rem;
  display: inline-block;
  padding: 5%;
}
.item.item-a {
  width: 30%;
  background-color: blue;
}
.item.item-b {
  width: 50%;
  background-color: red;
}

반응형 만들기

body {
  margin: 0;
  font-size: 2em;
}
h1, p { margin: 0; }
.container {
  margin: 0 auto;
  max-width: 1000px;
}

.item {
  padding: 5%;
}
.item.item-a {
  background-color: blue;
}
.item.item-b {
  background-color: red;
}
@media screen and (min-width: 700px) {
  .container {
    font-size: 0; 
  }
  .item {
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    padding: 5%;
  }
  
  .item-a {
    width: 30%;
  }
  .item-b {
    width: 50%;
  }
}