dtとddを二列にして、フクキシブルボックスで並べることはできないのでしょうか？

Question

下記のdtとddを二列にして、フクキシブルボックスで並べることはできないのでしょうか？

<dl class="company-profile">の中身を左右中央に配置できません。

https://jsfiddle.net/u9dL5fxd/13/

上記は完ぺきにテキストがセンタリングになっていませんが、
かなりイメージに近いです。

ただ、ddの横幅が小さすぎてもっとおおきくしたいのですが
、フレックスボックスはふくざつで増やすと崩れたり関係ないところが影響を受けたりします。

いったいどんな使用になっているのですかね？
すぐにカラム落ちしたりくずれたり関係ないところが動いてしまいます。

このような場合フレックスボックスを使うべきではないでしょうか？
display:inline;がいいですかね？

Answer 1

やりたいものがいまいちわからなかったですが、dt,ddが交互にあるHTMLでdtが左側、ddが右側で、左右半分ずつのスペースを取って中身は左揃えというのならこれでどうでしょう

https://jsfiddle.net/48oom15L/1/

Comments

[退会済みユーザー]

わかりにくくすいません。
下記の会社情報のイメージです。
文字は左ぞろえで、親ボックスが中央ぞろえになっていませんか？

https://www.theport.jp/

[lazex]

特にflexbox使う必要なさそうだったので、こんなふうにしてみました

https://jsfiddle.net/48oom15L/3/

dt,dd の幅は自分で調節する必要があります

Answer 2

flexはまったく必要ないと思います。
http://codepen.io/mayo31/pen/rLvbdO

サイズは自分で好きに調整してください。

Comments

[退会済みユーザー]

flexはまだ使えないですね。

[NatsumiOki]

今codepen見たらddにゴミソースが混ざったまま保存されていたので、消しておきました

dd {
padding: 0.5em 0.5em 0.5em 6em;
border-bottom: 1px solid #ccc;
}

です