Need help getting the correct layout - html

Question

I have some problems laying out my elements. I tried to achieve the following layout in my web application:
I tried to use div´s and style them but it looks like this when I run it
I wanted to create a grid with three container in each row. Also for responsiveness I used flexbox.
Any suggestions how the layout could improve? I think I messed it up a little.
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 0 32%;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
padding: 1.4em;
float: left;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
float: right;
}
.contactDetails {
float: left;
}
.contactDetails img {
width: 50px;
height: 50px;
}
#contact .contact-buttons {
position: absolute;
bottom: 0;
left: 0;
}
/* Using flexbox with media queries to make the layout responsive*/
#media screen and (min-width: 40em) {
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.contact-info {
display: flex;
flex: 0 1 calc(50% - 0.5em);
margin-bottom: 1em;
}
}
#media screen and (min-width: 60em) {
.contacts-container {
margin-top: inherit;
}
.contact-info {
flex: 0 1 calc(33% - 1em);
margin-bottom: 2em;
}
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>

Answer 1

.contacts {
width: 300px;
padding: 40px;
border: 1px solid black;
}
.contact {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.contact .contactInfo {
display: flex;
margin-bottom: 30px;
}
.contact .contactInfo img {}
.contact .contactInfo .contactName {
margin: auto 0;
margin-left: 30px;
}
.contact .contactDetails {
margin-bottom: 30px;
border: 1px solid black;
}
.contact .contactDetails div {
display: flex;
margin: 10px;
}
.contact .contactDetails div p {
margin-left: 30px;
}
.contact .contact-buttons {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img src="https://via.placeholder.com/150" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>

Answer 2

.contact {
margin-bottom: 5px;
border: 1px solid #ddd;
padding: 10px;
}
.contactInfo {
display: flex;
align-items: center;
}
.contactDetails {
border: 1px solid #ddd;
padding: 10px;
}
.contactDetailsRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.contactName,
.contactDetailsRowName {
flex: 1;
padding-left: 10px;
}
.contact-buttons {
display: flex;
}
.contact-buttons > button {
flex: 1;
margin: 10px;
}
<div class="contact">
<div class="contactInfo">
<div>
<img src="https://via.placeholder.com/100" />
</div>
<div class="contactName">
<h5>Prename Surname</h5>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
</div>
<div class="contact-buttons">
<button>Add 1</button>
<button>Add 1</button>
</div>
</div>

Answer 3

Been a while but something like this?
:root {
--baseMargin: 1.4em;
--buttonBorderRadius: 0.5em 0.5em 0.5em 0.5em;
--paddingBaseFill: calc(var(--baseMargin) * 2);
}
.contactInfo img {
min-width: 10em;
}
.contacts-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 1;
display: flex;
flex-direction: column;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.wrapper {
margin: 0 var(--baseMargin);
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
flex: 1 1;
display: flex;
padding: var(--paddingBaseFill) 0;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
flex: 1 1;
margin-left: var(--baseMargin);
text-align: center;
}
.contactDetails {
flex: 1 1;
padding: 1em;
border: 0.1em solid black;
}
.contactDetails div {
display: flex;
align-items: center;
}
.contactDetails img {
width: 50px;
height: 50px;
padding: 0.5em;
}
.contact-buttons {
flex: 1 1;
display: flex;
justify-content: space-between;
padding: var(--baseMargin) 0;
}
.contact-buttons button {
font-size: 1.2em;
background: #018bff;
border-radius: var(--buttonBorderRadius);
padding: 0.25em;
color: #fff;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo wrapper">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails wrapper">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons wrapper">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>