How to Place a vertical line between each image? - html

Question

I would like to place a vertical line between each image, I have tried several things but without success.
Here is an idea of the final result. There is a vertical gray line between the two images.
How to create the vertical line?
.background-contact{
background-color: white;
width: 100%;
height: 190px;
position: absolute;
}
.logo5{
padding-top: -70px;
padding-left: 38px;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
margin-top: -32px;
padding-left: 20px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
top: 22%;
left: -12%;
position: relative;
transform: translateX(-50%);
}
.logo6{
padding-top: 35px;
left: -80%;
}
<div class="background-contact">
<img class="logo5" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
<span class="text-contact-1">Just For VIP Member</span>
<img class="logo6" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>

Answer 1

I didn't do the pixel perfect but something like this:
.background-contact{
background-color: white;
width: 100%;
position: absolute;
display: flex;
}
.background-contact__block {
padding-bottom: 20px;
}
.background-contact__block + .background-contact__block {
margin-left: 50px;
padding-left: 20px;
border-left: 1px solid #ccc;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
display: block;
}
.logo{
display: inline-block;
vertical-align: middle;
}
.background-contact__name {
padding-bottom: 30px;
}
<div class="background-contact">
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
</div>
<span class="text-contact-1">Just For VIP Member</span>
</div>
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
</div>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>
</div>

Answer 2

to create a border you can use
border: (width) (style) (color);
This will make a border all around the element, to select one side you can use
border-left:
border-right:
border-top:
border-bottom:
But here your css is very strange, I recommend you to use the less as possible absolute positioning.
Here a better way do write that :
.contact-item {
width: 200px;
display: inline-block;
}
.contact-item img,
.contact-item h1 {
display: inline-block;
}
.border-left {
border-left: 2px solid #ddd;
padding-left: 1rem;
}
<div id="background-contact">
<div class="contact-item">
<img src="https://i.ibb.co/0YyTszS/title-icon1.png">
<h1>Telephone</h1>
<p>text<p>
</div>
<div class="contact-item border-left">
<img src="https://i.ibb.co/026Fs1B/title-icon2.png">
<h1>Email Us</h1>
<p>text</p>
</div>
</div>
you can also use :
element::last-child {
border-left: .. .. ..;
}