SCSSを使って要素を横並びにする方法

やりたいこと

図の変更後のようにtableを横並びにしたい。

変更前

変更後

手順

① wrapper1に display: inline-block; を適用させる。

wrapper1 {
  display: inline-block;
}

②全体の横幅を100%とした時、wrapper1とwrapper2を相対的に評価して幅を決める。

例）wrapper1 : wrapper2 = 3 : 7　にする
　　wrapper1 の width: 30%;
　　wrapper2 の width: 70%;

wrapper1 {
  display: inline-block;
  width: 30%;
}

wrapper2 {
 width: 70%;
}

③ wrapper2に float: right;を適用させる。

これを適用させることで、wrapper1の横に, wrapperにが潜り込む。

wrapper1 {
  display: inline-block;
  width: 30%;
}

wrapper2 {
 width: 70%;
 float: right;
}