<div class="all_back">
  <div class="wrapper_flex">
     <div class="main_text">
       <h1>記事</h1>
     </div>
     <div class="side_content">
       <p>サイドバー<p/>
     </div>
  </div>
</div>
.all_back{
  background-color: black;
  width: 1000px;
  height: 900px;
  padding: 30px 30px 30px 30px;
}

.main_text{
  background-color: #fff;
  width: 100px;
  height: 200px;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
}

.side_content{
  display: block;
  background-color: #fff;
  width: 50px;
  height: 100px;
  border-radius: 10px;
  margin-left: 50px;
  padding: 20px 20px 20px 20px;
}

/* 横並びにするcss */
.wrapper_flex{
  max-width: 800px; /*二つの要素の幅*/
  display: flex; 
}
Rerun