Add divider to column css-CodePudding

I am trying to create a row with 2 columns with a divider as shown below.

there is a light divider and also a white divider that should increase according to text amount like this

how can I achieve this in CSS so that the white line divider increases based on the text amount in either column?

CodePudding user response：

You can create a container for the long-stick border, and apply a short-stick border on text elements

.flexbox {
  display: flex;
}

.text-container {
  padding: 1rem 0; /*Create a top-bottom padding for text container*/
  width: 50%;
}

.text-container span {
  padding: 0 1rem; /*Create a left-right padding for text*/
  display: block;
}

.text-container:first-of-type {
  border-right: 1px solid #ccc; /*Border on text container*/
}

.text-container:first-of-type span {
  border-right: 4px solid #ddd; /*Border on text*/
  margin-right: -2.5px;
}

<div >
  <div >
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div >
    <span>Lorem ipsum dolor sit amet</span>
  </div>
</div>

CodePudding user response：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
  background: #111;
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
}

.container {
  width: 700px;
  box-shadow: 0px 0px 10px #000;
  background: #222;
  color: rgb(140, 140, 140);
}

.text {
  margin: 0;
  padding: 40px;
  width: 50%;
  display: flex;
  align-items: center;
}

.textcontainer {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.divider {
  display: inline-block;
  width: 1px;
  background: #fff;
  align-self: stretch;
  margin-top: 40px;
  margin-bottom: 40px;
  z-index: 1;
}

.text:nth-of-type(even) {
  border-left: 0.5px solid #444;
}

<div >
  <div >
    <p >
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </p>
    <span ></span>
    <p >
      Hello World. this is a test. And it looks awesome to design.
    </p>
  </div>
</div>