Как разметить данный блок?

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
   
  font-family: sans-serif; 
} 
 
.card { 
  box-sizing: border-box; 
  width: 380px; 
  height: 100px; 
  padding: 1rem; 
  display: flex; 
  align-items: center; 
  justify-content: space-around; 
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
 
img { 
  width: 50px; 
  height: 50px; 
  border-radius: 50%; 
  background-color: #1976D2; 
} 
 
.info { 
  margin-right: 5rem; 
} 
 
.info > div:first-child { 
  font-weight: bold; 
} 
 
.info > div:last-child { 
  font-size: 12px; 
  color: #E91E63; 
} 
 
button { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between; 
  background: none; 
  border: none; 
} 
 
button > span { 
  width: 6px; 
  height: 6px; 
  margin: 0.3rem 0; 
  background-color: #9E9E9E; 
  border-radius: 50%; 
} 
 
button::after, 
button::before{ 
  content: ''; 
  width: 6px; 
  height: 6px; 
  background-color: #9E9E9E; 
  border-radius: 50%; 
}

<div class="card"> 
  <img src="https://robohash.org/6?set=set2" alt="robot"> 
  <div class="info"> 
    <div>Business Cards</div> 
    <div>