How to add lines besides a vertical text?

Question

Do I have to create a new wrapper for the borderlines? I tried to add the borderlines inside the text property but I cannot align it correctly.[![enter image description here][1]][1]

Answer 1

You can achieve this layout by doing the following:

Transform the element you want to. Then mess around with the margins / padding of everything, since the vertical element is transformed and it gets taken outside of the normal flow of the document.

Give the vertical element a border-bottom (since the "vertical" border is really this elements bottom side).

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: DarkOrchid;
  color: white;
  font-family: sans-serif;
}

p {
  margin: 0; 
}

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 600px;
}

.vert {
  display: flex;
  transform: rotate(-90deg);
  border-bottom: 2px solid white;
  padding-left: 3rem;
}

.vert p {
  padding-bottom: 1rem;
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -3.25rem;
  margin-top: -3rem;
}

.items p {
  padding-left: 1rem;
}

.item-top p {
  padding-bottom: 1rem;
}

.item-bottom {
  border-top: 2px solid white;
}

.item-bottom p {
  padding-top: 1rem;
  font-size: 18px;
}

<main>
  <div class="wrapper">
    <div class="vert">
    <p>June 7, 1941</p>
  </div>
  <div class="items">
    <div class="item item-top">
      <p>Short text</p>
    </div>
    <div class="item item-bottom">
    <p>Some text that will appear on the bottom.</p>
    <p>You can put whatever you want here.</p>
    </div>
  </div>
  </div>
</main>