How can I put my text in each line of a vertical bar?

user_19895738 0
Viewed 38

I'm trying to put the "Education" text on the left side and the rest on the right side, while being responsive. When I change the position to absolute, when I resize the page it deformats, but when I use relative I can't put content in the sides.

HTML

<div class="flex-container">
     
      <div id="curriculumID" class="curriculum">
        <h1>Curriculum</h1>
        <br />
        <div class="education">
          <h1>Education</h1>
          <div class="vertical-line1"></div>
          <p class="years">2020-Present</p>
          <h2>College in my area</h2>
          <br />
          <img src="https://i.ibb.co/Jjy7qVv/logoIsep.png" alt="ISEP Icon" />
          <p id="pr">Pursuing a degree in some Engineering.</p>
          <br />
          <hr />
          <br />
          <p class="years">2017-2020</p>
          <h2>Escola Secundária de somewhere</h2>
          <br />
          <img
            src="https://i.ibb.co/5v52S84/Logo-Boa-Nova.png"
            alt="ESBN Icon"
          />
          <p id="pr">Completed highschool in Science and Technology.</p>
        </div>
      </div>
</div>

CSS

.flex-container{
    display: flex;
    flex-direction: column;
}

.curriculum{
        display: inline-block;
        background-color: #182436;
        padding: 30px;
        margin: 25px;
        border-radius: 15px;
}

.curriculum > h1 {
    color: #15faa6;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
}

.education > h1 {
    color: #f2f2f2;
    font-size: 30px;
}

.vertical-line1 {
    border-left: 3px solid #f2f2f2;
    height: 450px;
    align-items: center;
    margin-left: 50%;
    margin-right: 50%;
}

.years {
    color: #aaaaaa;
}

#pr {
    color: #f2f2f2;
}

.education > h2 {
    color: #f2f2f2;
}

.education > img {
    width: 5%;
    height: auto;
}

.education > .years,h2 {
    display:inline;
}

.education > img,#pr {
    display:inline;
}

.education > hr {
    float: left;
    color: #f2f2f2;
    width: 40%;
}

Codepen: https://codepen.io/alexkoyomi/pen/GRdKPRw

responsive css html
1 Answers

I can only assume that you want to have "Education" on the left side of the line, and the details on the right side.

For that to work you need to add everything from the right side in its own container, like so:

<div class="flex-container">
     

      <div id="curriculumID" class="curriculum">
        <h1>Curriculum</h1>

        <div class="education">

          <div class="left-side">
              <h2>Education</h2>
          </div>
          <div class="right-side">
              <p class="years">2020-Present</p>
              <h3>College in my area</h3>
              ...
          </div>

        </div>
      </div>
</div>

And then make the education container display as flexbox, give the left and right side a flex-base (basically a width) of 50%:

.education {
  display: flex;
}
.left-side {
  border-right: 2px solid #fff;
}
.left-side,
.right-side {
  flex-basis: 50%;
  padding: 20px;
}

I also removed the line and just gave the left side a border-right, that way the line will always grow with the content. For mobile/responsive you can change the border-right to border-bottom.

Also note that you should never use more than one h1 element per page, use h2 instead.

user_107174240
Related