Putting a vertical line after flex element-CodePudding

I've started again with web design and am currently building my portfolio. Anyway, I wanted to know how you would implement that. I have the problem that I want to put a vertical line under an element. enter image description here

/* main-style.css */

@import url('https://fonts.googleapis.com/css2?family=Noto Sans JP:wght@300&display=swap');
:root {
  --default-font: 'Century Gothic';
  --default-jp-font: 'Noto Sans JP';
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--default-font);
  text-transform: uppercase;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 1px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(138, 33, 199);
}

body {
  background-color: #252525;
}

.body-wrapper {
  width: 100%;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
}

#welcome {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background-welcome.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#welcome>.content-container {
  margin-top: 25%;
  margin-left: auto;
  background-color: rgba(255, 255, 255, 0.2);
  width: 20%;
  text-align: center;
  padding: 1.4% 0.4%;
  backdrop-filter: blur(2px);
  border: 2px solid white;
  flex-wrap: wrap;
}

#welcome>.content-container>p {
  color: wheat;
  font-size: 24px;
  letter-spacing: 3px;
}

#welcome>.content-container>p>b {
  color: #f5deb3;
}

#welcome>.side-content-container {
  margin-left: auto;
  height: 100%;
  justify-self: flex-end;
  padding-right: 2%;
  display: flex;
  align-items: center;
}

#welcome>.side-content-container>p {
  /*color: rgb(185, 157, 30);*/
  font-size: 26px;
  writing-mode: vertical-rl;
  letter-spacing: 1.5rem;
  color: transparent;
  background-image: url('../img/background-welcome.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  filter: brightness(500%);
}

.section-seperator {
  width: 100%;
  height: 0.2rem;
  background-color: white;
}

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>This is me. - Jxson</title>
  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main-style.css'>
</head>

<body>
  <div >
    <section id="welcome">
      <div >
        <p>Hey! this is me:<br><b>{Jason}</b></p>
      </div>
      <div >
        <p>私はアンを愛しています</p>
      </div>
      <div >
      </div>
    </section>
    <div >

    </div>
    <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio error quos dolores blanditiis reiciendis illum sit veniam temporibus, sapiente earum iure, reprehenderit sequi, quae assumenda est alias incidunt iusto!</p>
    </section>
  </div>
</body>

</html>

I'm specifically referring to the #welcome section which renders the content as a flex grid. I'm already trying to work with responsive positioning, but I don't want to use any shitfixes like "position: absolute" because I want to ensure as much dynamism as possible. Does anyone have an idea or a suggestion on how to implement this? Suggestions for improvement are welcome ^^

I already tried to play around with position absolute but i dont want to use that, due the dynamic size. I also tried to play around with flex-wrap and indexes but nothing worked out for me!

CodePudding user response：

.container{
display:flex;
justify-content:center;
align-items:center;
height:95vh;
flex-direction:column;
}

.line{
height:15vh;
border:solid 1px red;
}

<div class='container'>
  <div id='text'>
     Hi my name is <br>
  </div>
  
  
    <div class='line'></div>    
 
    
    
</div>