HTML CSS Vertical Line with exact height of a div-CodePudding

I've got a div element with some content (shown in the picture). I want (for styling purposes) create a vertical line next to it with the exact same height (needs to be responsive so a static "height" value isnt working)

Does anybody have ideas?

CodePudding user response：

Option #1 - Set Border of Outer Element

.content {
  border-left: 2px solid #000;
  padding: 0 0.5rem;
}
.content p {
  max-width: 80%;
}

<div >
  <p>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
    Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  </p>
</div>

Option #2 - Create Element with Full Height

.content {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  height: 10rem;
}

.content .line {
  height: 100%;
  width: 2px;
  background: #000;
  margin-right: 0.5rem;
}

<div >
  <p>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
    Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  </p>
  <div ></div>
</div>

CodePudding user response：

You can attain it using a simple border on the left.

.mytext {
  border-left:3px solid red;
  padding-left:15px;
  }

<div >
<h1>Head<h1>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
</div>

CodePudding user response：

Put a div inside your container, make your container relative and make that div absolute with top and bottom as 0.

.container{
  position: relative;
}

.line{
  width: 4px;
  background-color: red;
  position:absolute;
  top: 0;
  bottom:0;
}