How to create a simple page like in picture

Issue

I am a bit rusty in HTML and CSS.
Can somebody suggest, how to create a line(in in the middle, and text on left and right?

Center

Ive tried one div with left: 50; second div right:50 and text align right

Solution

You could use flex container which I find cleaner, with a simple div that represents the vertical ruler you need.

html,body {
  margin: 0;
  font-family: sans-serif
}
#container {
  height: 100vh;
  width: 100vw;
  background: #000;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  color: #fff;
}
.border {
  height: 1rem;
  border-right: 1px solid #8d8d8d;
}
.small {
  font-size: 12px;
}
<div id="container">
  <span>500</span>
  <div class="border"></div>
  <span class="small">internal server error</span>
</div>

Answered By – Loïc Monard

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published