flexを使った簡単な2カラムレイアウト

簡単に2カラムレイアウトを作る場合の例です。
もちろんスマホへのレスポンシブにも対応しています。

<div class="two_colum_container">
<div class="two_colum" style="border: solid 3px #000000;"><span style="color: #ff6600;">テストテスト1</span></div>
<div class="two_colum" style="border: solid 3px #000000;"><span style="color: #ff9900;">テストテスト2</span></div>
</div>
two_column > div{
width: 47%;
border: 1px solid #CCC;
padding: 4px 0px 4px 0px;
margin: 0.5% 1% 0.5% 1%;
display: flex;
flex-wrap: wrap;
align-items: center;
text-decoration: none;
height: 20px;
font-size: small;
color: black;
font-family: system-ui;
}
.two_column > div:nth-child(2n){
margin-left:1%;
}
.two_column {
width: 99%;
display: flex;
flex-wrap: wrap;
margin: 10px 0px;
position:relative;
left: 1%;
}
実際に作る
こんな感じ。余白とかは考えないといけないですが、
親要素を鑑みてできます
テストテスト1
テストテスト2