I am trying to produce the following list in CSS/HTML from scratch:

[![enter image description here](https://i.stack.imgur.com/j6nKW.png)](https://i.stack.imgur.com/j6nKW.png)

Unfortunately, I ran into a few issue with absolute positioning, the elements seem to be on top of each other.

How do I use relative or flexboxes positioning to fix this?

```css
.contact-container {
  display: flex;
  position: relative;
  padding: 1em;
}

.contact-container:hover {
  cursor: pointer;
  background-color: #f7f7f7;
}

.contact-avatar-container {
  width: 100%;
  display: block;
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.contact-online-status {
  background-color: #41dc21;
  height: 0.5em;
  position: absolute;
  right: 0;
  top: 15px;
  left: 45px;
  width: 0.5em;
  border-radius: 100%;
}

.contact-name {
  position: absolute;
  top: 32px;
  left: 70px;
  font-size: 1.25em;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

.contact-last-known-interaction {
  position: absolute;
  top: 15px;
  left: 70px;
  font-size: 0.75em;
  font-weight: 300;
  color: rgb(147, 147, 147);
}

.contact-call-button {
  height: 34px;
}

.contact-call-button .phone {
  position: absolute;
  top: 30px;
  right: 30px;
  fill: rgb(57, 220, 12);
  font-size:16px;
  height: 20px;
}
```

```html
<div class="contact-list-container">
  <div class="contact-container">
    <div class="contact-avatar-container">
      <div class="contact-avatar" style="background: url(&quot;https://images.unsplash.com/photo-1579192181049-2aa87e49df2a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60&quot;) 0% 0% / cover;"></div>
      <div class="contact-online-status"></div>
      <div class="contact-name">Abul Philip</div>
      <div class="contact-last-known-interaction">Last spoke Mar 27</div>
      <div class="contact-call-button"><svg viewBox="0 0 14 14" class="phone">
          <path d="m13.76 12.32-.38.54v.05.06c-1.41 2-5.42 1-9-2.28s-5.3-7.55-3.89-9.56v-.06l.07-.07.38-.52a1.15 1.15 0 0 1 1.77-.12l1.9 1.75a1.59 1.59 0 0 1 .27 2l-1.28 1.89a16.23 16.23 0 0 0 2.27 2.52 15.17 15.17 0 0 0 2.66 2l1.28-1.84a1.15 1.15 0 0 1 1.78-.12l1.89 1.75a1.58 1.58 0 0 1 .28 2.01z"></path>
        </svg></div>
    </div>
    <div class="contact-avatar-container">
      <div class="contact-avatar" style="background: url(&quot;https://images.unsplash.com/photo-1579192181049-2aa87e49df2a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60&quot;) 0% 0% / cover;"></div>
      <div class="contact-online-status"></div>
      <div class="contact-name">John Smith</div>
      <div class="contact-last-known-interaction">Became friends Mar 27</div>
      <div class="contact-call-button"><svg viewBox="0 0 14 14" class="phone">
          <path d="m13.76 12.32-.38.54v.05.06c-1.41 2-5.42 1-9-2.28s-5.3-7.55-3.89-9.56v-.06l.07-.07.38-.52a1.15 1.15 0 0 1 1.77-.12l1.9 1.75a1.59 1.59 0 0 1 .27 2l-1.28 1.89a16.23 16.23 0 0 0 2.27 2.52 15.17 15.17 0 0 0 2.66 2l1.28-1.84a1.15 1.15 0 0 1 1.78-.12l1.89 1.75a1.58 1.58 0 0 1 .28 2.01z"></path>
        </svg></div>
    </div>
  </div>
</div>
```