可変幅レイアウト

###前提・実現したいこと
JavaScriptを使わないcssで可変幅のグリッドレイアウトを作成しています。
２カラムの可変幅で余白を固定で表示させたいのですが、カラム落ち？になってしまいます。
どのように対処すればいいですか？

###該当のソースコードcss

.box-x {
  height: 500px;
  width: 100%;
  padding: 20px;
  background-color: #ecf1f2;
}
.g-12 {
  height: 50px;
  width: 100%;
  background-color: #fff;
}
.g-6-1 {
  height: 50px;
  width: 50%;
  margin-top: 20px;
  margin-right: 20px;
  background-color: #fff;
}
.g-6-2 {
  float: right;
  height: 50px;
  width: 50%;
  margin-top: 20px;
  margin-left: -20px;
  background-color: #fff;
}

###該当のソースコードHTML

<div class="box-x">
            <div>
                <div class="g-12"><div>12</div></div>
            </div>
            <div>
                <div class="g-6-1"><div>6</div></div>
                <div class="g-6-2"><div>6</div></div>
            </div>
</div>

行動規範の内容に同意します

回答2件

ベストアンサー

なるべく変えずに、ということなので。

CSS
1/* これを追加 */
2.g-6-1,
3.g-6-2 {
4	width: calc(50% - 10px);
5}
6.g-6-1 {
7	float: left;
8}
9```**動くサンプル：**[https://jsfiddle.net/7yboyku6/](https://jsfiddle.net/7yboyku6/)