cssで横ならびにしたときに「項目 ー 項目の説明 ー 項目 」 といったレイアウトを実現したいのですがどのようにコーディングを行うのが適していますか？

Question

前提・実現したいこと

上記、画像イメージでHTML５CSS３でのコーディングを想定しています。
真ん中テキストエリアは文字の多さによって改行できる仕様にしたいです

cssの部分で、「ー」をどのように、スタイルをかいていけばいいか、という部分が不明です、

tableのborderを短めの水平線に変えたいという感じです

試したこと

テーブルで行うイメージでしたが、間の「-」を実現できませんでした

Comments

[m.ts10806]

テーブルで出来ない理由が分からないですね。
最も簡単にできる手段に思いますが。
どのように組まれましたか？

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[azuapricot]

ご自身のコードをマークダウン <code> を使用して提示してください。
横並びのやり方は何通りもあるので質問者さんのコードにあうものを想像で提示するのは難しいです。

[yoshinavi]

「table」「border」が条件であれば、セルをいくつか配置・連結したり、任意のbox（border）の配置等が考えられますが、まずは、ご自身のコードをご提示ください。

Answer 1

今回の場合、複数の説明用語に対して 1 つの説明が存在する、という構造になっているため、質問さんが実現したいことは、dl要素と flexbox を使い、以下のように行えると思います(動作確認用リンク)。

<dl>
  <div>
    <dt>項目1</dt>
    <dt>項目2</dt>
    <dd>説明説明説明説明</dd>
  </div>
  <div>
    <dt>項目1</dt>
    <dt>項目2</dt>
    <dd>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</dd>
  </div>
  <div>
    <dt>項目1</dt>
    <dt>項目2</dt>
    <dd>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</dd>
  </div>
</dl>

*
{
    margin: 0;
    padding: 0;
}

body
{
    display: flex;
}

dl
{
    max-width: 65em;
    margin: auto;
    flex: 1;
}

div
{
    display: flex;
    margin-bottom: 2em;
    justify-content: space-between;
    align-items: center;
}

div::before,
div::after
{
    max-width: 3.5em;
    height: .2em;
    content: '';
    background: #faa;
    flex: 1;
}

dt:nth-of-type(1)
{
    order: -1;
}

dt:nth-of-type(2)
{
    order: 1;
}

dd
{
    max-width: 25em;
}