How can I create two lines on top of each other with CSS?

I don’t know how can I create something like this with CSS. Could you please help me?

You could use this. I’ve used a cdn so you can see the icons.


<link rel="stylesheet" href="" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 

<div class="card-container">
    <ul id="contact">
      <li><i class="fas fa-phone"></i>019 207 200</li>
      <li><i class="fas fa-envelope">   </i></li>


.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
#contact {
  list-style-type: none;
  padding-left: 0px;
  display: flex;
  flex-direction: column;
#contact li {
  padding: 12px 10px;

i {
  margin: 0px 20px;

I hope that helps.

1 Like

Thank you
What about the lines?

Ah okay the lines, so for the lines you could simply use a div, defines its size and then add a simple border to it like so :

<div class="myDiv"></div>

And for the style :

.myDiv {
border: 1px solid black;

You can adjust size/ color of the border according to your liking.
Let me know if this works for you.

1 Like

Yes it works.
Thank you Chris

1 Like

Great. Happy Coding !