Text columns with icons を横並びに

[dts2]

アイコンとテキストが縦に流れていくのを、

縦２横２の４分割へ変更したいです。

追記のCSSコード教えてください。

[BigLittleImpact]

こんにちは。ご利用されているHTMLコードによりますが、以下のHTMLとCSSを使えば縦２横２の４分割にできるはずだと思います。

HTML:

<div class="container">
  <div class="column">
    <div class="icon">
      <!-- アイコンコードまたは画像をここに挿入してください -->
    </div>
    <div class="text">
      <!-- テキストコンテンツをここに挿入してください -->
    </div>
  </div>
  
  <div class="column">
    <div class="icon">
      <!-- アイコンコードまたは画像をここに挿入してください -->
    </div>
    <div class="text">
      <!-- テキストコンテンツをここに挿入してください -->
    </div>
  </div>
  
  <div class="column">
    <div class="icon">
      <!-- アイコンコードまたは画像をここに挿入してください -->
    </div>
    <div class="text">
      <!-- テキストコンテンツをここに挿入してください -->
    </div>
  </div>
  
  <div class="column">
    <div class="icon">
      <!-- アイコンコードまたは画像をここに挿入してください -->
    </div>
    <div class="text">
      <!-- テキストコンテンツをここに挿入してください -->
    </div>
  </div>
</div>

CSS:

.container {
  width: 100%; /* 必要に応じて幅を調整してください */
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: 50%; /* 各列の幅はコンテナの50%に設定してください */
  display: flex;
  align-items: center;
}

.icon {
  width: 30%; /* 必要に応じてアイコンの幅を調整してください */
  margin-right: 10%; /* アイコンとテキストの間にスペースを追加します */
}

.text {
  width: 60%; /* 必要に応じてテキストの幅を調整してください */
}