Create contact card with html css

What do you think about the best way to create a contact card like this:

I tried to use for icones and it works. But I don’t know why icones are like this in my version:

My whole codes:

<meta name="viewport" content="width=device-width, initial-scale=1">
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  display: flex;
  flex-direction: row;

.container {
  padding-left: 100px;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  background-color: black;
<script src=""></script>


<div class="card">
  <img src="CEO2.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4 style="color: white; width: 200px; font-size: 20px;"><b>John Doe</b></h4> 
    <p style="color: rgb(163, 150, 150); margin-top: 0; font-size: 15px;">VD</p>
    <div style="display: flex; flex-direction: row;">
    <span class="iconify" data-icon="fluent:call-16-filled" data-inline="false" 
    style="color: #ffa31a;"></span>
    <p style="color: white;">123456789</p>
    <div style="display: flex; flex-direction: row; ">
        <span class="iconify" data-icon="fluent:mail-28-filled" data-inline="false" 
        style="color: #ffa31a;"></span>
        <p style="color: white;"></p>


New <p> elements come with a built in margin, however the SVG elements do not, therefore they are not perfectly inline. I would add a style to remove this like so;

p {
  margin: 0;

And then I would add a margin to your flex container’s so that the margin is applied to both the icon and the text.