HTML、CSS ボックスの高さについて

Question

HTML、CSS初心者です。

ブートストラップで横並びのボックス２つを作成したのですが、想定している形にならないためご教授いただけますでしょうか。

・class="seminar-title"　部分のボックスを左右２つ同じ高さで固定したい（テキスト量が変化すると高さが変わってしまう）
・class="btn btn-secondary" のボタン位置を左右２つ同じ高さで固定したい（テキスト量が変化すると高さが変わってしまう）

よろしくお願いいたします。

[画像追加]※一部下記部分を修正済み
■before

<div class="col-md-6"> <div class="list"> <div class="container"> ■after <div class="col-md-6 d-flex"> <div class="list d-flex flex-column"> <div class="container flex-fill">

<div class="container">
    <div class="row o-2column">
        <div class="col-md-6">
            <div class="list">
                <div class="container">
                    <div class="d-flex justify-content-start">
                        <div class="seminarinfomaitions">テスト
                        </div>
                        <div class="seminarinfomaitions">テスト
                        </div>
                    </div>
                    <p class="seminar-title">
                    <span class="seminar-title-sub">セミナータイトルa</span><br>
                    <span class="seminar-title-main">セミナータイトルb</span><br>セミナータイトルc</p>
                </div>
                <p class="text1">説明文</p>
                <p class="text-center"><button type=“button” class="btn btn-secondary" onclick="window.open('https://～')">詳細はこちら</button></p>
            </div>
        </div>
  
        <div class="col-md-6">
            <div class="list">
                <div class="container">
                  ～省略～
            </div>
        </div>
    </div>
</div>

Comments

[yambejp]

具体的にどうしたいか図示してください

[退会済みユーザー]

<p class="seminar-title"> <span class="seminar-title-sub"> <span class="seminar-title-main"> これら全部divにした方が調整しやすそう。flexレイアウトで。
タイトル系なのにp要素を使ってる時点で、文書フローに則った記述をするつもりがないのなら、divでやってもいいんじゃないかなって。

[oskyk1510]

yambejp様
画像を追加しました。

sPy2bUDOZ4uRa7t様
文字サイズ等差をつける必要があったのでclass分けをしたかったのですが、divの多用はどうなのかと思い迷っていました。divで良いのですね。ありがとうございます。

[BeatStar]

ヒント: overflow (CSS)

Answer 1

こういう感じですか？
（バージョンの指定がなかったので 5 で書いています。）

			<div class="col-md-6 d-flex">
				<div class="list d-flex flex-column">
					<div class="container flex-fill">

Comments

[oskyk1510]

バージョンは５です。
いただいた内容でボタン位置はそろったのですが、今度は説明文の高さがそろわなくなりました。
現状のスクショを追加しましたので、アドバイスいただけますと幸いです。

[Lhankor_Mhy]

よくわからないのですが、文字数の違うテキストの高さをどうやって合わせるつもりなのですか？　テキストの量が多くなれば行数が増えるのはどうしようもないように思えるのですが。
フォントを小さくするとかですか？

[Lhankor_Mhy]

もしかして、テーブルみたいにしたい、ということですか？

[oskyk1510]

用途としてはセミナーの内容を記述していくので、カードデザインです。記載していませんが、この2つのボックス以下にも同じボックスが左右２つずつ並んでいくスタイルです。
固定された枠サイズの中に、テキストを入れていくというイメージです。
イメージ参照　https://service.aainc.co.jp/seminar/

[Lhankor_Mhy]

つまり、タイトルの部分とテキストの部分、それぞれについて、テキストの多い方の高さに合わせて伸ばしたい、みたいなテーブルのようなレイアウトということでいいでしょうか？

だとすると、Bootstrap では難しく、通常のCSSを使うことになってしまうと思いますが、いいでしょうか？