<div>タグの中央に縦線を引きたい

Question

画像のように、<div>要素の真ん中に縦線を引きたいです。

<div>要素は画面を小さくするとそれに応じて拡大縮小するため、それに合わせて伸び縮みする方法を知りたいです。 よろしくおねがいします。

補足：縦線は<div>要素よりも上に少し飛び出すスタイルです。

Answer 1

２つのボックスを囲む親要素を設定すれば可能です。

以下は一例です。

親要素であるwrapperの大きさに依存するように、子要素であるbox1とbox2、divider（仕切り）の各cssを設定しました。
これで要件は満たすかと思います。

<div class="wrapper">
  <div class="box1"></div>
  <div class="divider"></div>
  <div class="box2"></div>
</div>

.wrapper {
  width: 100vw;
  height: 50vh;
}

.box1 {
  display: inline-block;
  background-color: red;
  width: 45%;
  height: 90%;
}

.divider {
  display: inline-block;
  border-left: 1px solid #38546d;
  border-right: 1px solid #16222c;
  height: 100%;
}

.box2 {
  display: inline-block;
  background-color: blue;
  width: 45%;
  height: 90%;
}