сделать вертикальную разделительную линию в HTML / CSS

Question

Я новичок в HTML / CSS и перебрал много ссылок на StackOverflow, но ни одна из них не сработала. Поэтому мне нужно реализовать вертикальную линию, как показано на рисунке ниже. Заранее спасибо

.root_class {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  margin: 0 auto;
  border: thin solid #ccc;
}

.text {
  font-size: 3rem;
  margin: 0;
  margin-right: 10rem;
}

.percentile-card {
  transition: 0.3s;
  margin: 1rem;
  padding: 5px;
}

.percentile-card p {
  margin: 0;
}

.percentile-card p:first-child {
  color: #bbb;
}

<div class="root_class rhs-background">
        <p class="text">Where Do i Stand Overall ?</p>
        <hr width="1" size="500">
        <div class="percentile-card text-center">
          <h4>You did better Than</h4>
          <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>
          <h5><b>60%</b></h5>
        </div>
      </div>

Answer 1

<hr style="width:100px; transform:rotate(90deg);">

Попробуйте

Answer 2

Код от W3Schools

<style>
.vl {
  border-left: 6px solid green;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}
</style>


<h2>Vertical Line</h2>

<div class="vl"></div>

Код от меня;

.root_class {
  display: flex;
  height : 100px;
  justify-content: center;
  align-items: center;
  width: 75%;
  margin: 0 auto;
  border: thin solid #ccc;
}

.text {
  font-size: 22px;
  margin-right : 25px;
}

.percentile-card {
  transition: 0.3s;
  margin: 1rem;
  padding: 5px;
}
.vl {
  border-left: 6px solid green;
  height: 100px;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

.percentile-card p:first-child {
  color: #bbb;
}
.rate{

margin-left : 60px;

}
.better{
    margin-top : 50px;
}

<div class="root_class">

        <p class="text">Where Do i Stand Overall ?</p>
          <div class="vl"></div>
          <div class="percentile-card text-center">

              <h4 class="better">You did better Than</h4>
                <h5 class="rate"><b>60%</b></h5>
          </div>
    
</div>
      

Answer 3

Вы можете сделать это просто двумя способами:

1. добавить поле 0 в час, как в css добавить час {margin: 0; }
2. Или, вы можете попробовать после позиционирования контента, как показано ниже код (более гибкий)

.root_class {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 75%;
  margin: 0 auto;
  border: thin solid #ccc;
  height: 400px;
  background: linear-gradient(to right, #fff 75%, #00a);
}

.text {
  font-size: 3rem;
  margin: 0;
  padding-right: 5rem;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}
.text:after {
  content: '';
  position: absolute;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: black;
}

hr{
  margin: 0;
}

.percentile-card {
  transition: 0.3s;
  padding: 5px;
  margin: 1rem;
}

.percentile-card p {
  margin: 0;
}

.percentile-card p:first-child {
  color: #bbb;
}

<div class="root_class rhs-background">
  <p class="text">Where Do i Stand Overall ?</p>
  <div class="percentile-card text-center">
    <h4>You did better Than</h4>
    <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>
    <h5><b>60%</b></h5>
  </div>
</div>

Answer 4

Вы можете добавить Margin: 0 в строку:

.root_class {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  margin: 0 auto;
  border: thin solid #ccc;
}

.text {
  font-size: 3rem;
  margin: 0;
  margin-right: 10rem;
}

.percentile-card {
  transition: 0.3s;
  margin: 1rem;
  padding: 5px;
}

.percentile-card p {
  margin: 0;
}

.VerticalLine {
  margin: 0;
  border: 0;
  width: 15px;
  background: teal;
}

.percentile-card p:first-child {
  color: #bbb;
}

<div class="root_class rhs-background">
  <p class="text">Where Do i Stand Overall ?</p>
  <hr class="VerticalLine" width="5px" size="500">
  <div class="percentile-card text-center">
    <h4>You did better Than</h4>
    <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>
    <h5><b>60%</b></h5>
  </div>
</div>