Штабелирование DIV с отзывчивой высотой и различными стилями

Question

Это, наверное, просто, но я довольно долго боролся за то, чтобы мои дивы стояли друг над другом и были отзывчивы. Я создаю шаблон страницы, который используется на десятках страниц сотрудников, поэтому все элементы div имеют разную высоту. У меня есть div «name», который показывает имя и должность сотрудника, за которым следует div «contact», который должен быть расположен непосредственно под ним.

Проблема в том, что эти div имеют разные стили, поэтому я не могу просто дать им один и тот же класс div и покончить с ним. Они должны быть привязаны к своим собственным отдельным стилям. Я играл с z-index, ордером, позициями, и я просто не могу заставить его делать то, что я хочу. Любая помощь будет оценена. Вот мой HTML и css код:

.profinfo-masterheader {
	position: relative;	
	display: flex;
	}
  
 .name {
	color: #ffffff;
	text-align: left;
	font-size: 1.9vh;
	background-color: rgba(136, 162, 99, 1);
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 20px;
	line-height: 35.5px;
	position: absolute;
	width: 100%;
	float: right;
	left: 20%;

}

.contact {
	color: #ffffff;
	text-align: left;
	font-size: 1.5vh;
  background-color: rgba(0, 60, 91, 1);
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	position: absolute;
	width: 100%;
	float: right;
	left: 10%;

	}

<div class="profinfo-masterheader">
<div class="name">
<h3><?php the_title(); ?>
<?php if(get_field('certification_for_name'))
{
	echo ', <i>' . get_field('certification_for_name') . '</i>';
}

?>
</h3>
<p><i><?php the_field('job_title'); ?></i></p>
</div>
</div>

<div class="profinfo-masterheader">
<div class="contact">
<p>P: <?php the_field('phone_number'); ?> | <a href="mailto: <?php the_field('email'); ?>"><img src="/wp-content/uploads/2020/04/mail-icon-white.png" height="20" width="26" style="margin-right: 10px; margin-left: 10px;"></a>
<?php if( get_field('linkedin') ): ?><a href="<?php the_field('linkedin'); ?>"><img src="/wp-content/uploads/2020/04/LinkedIn-Icon-White.png" height="20" width="20" style="margin-right: 10px;"></a><?php endif; ?>
<?php if( get_field('bio_english') ): ?>
    <a href="<?php the_field('bio_english'); ?>" target="_blank">Download Bio (Eng)</a>
<?php endif; ?>
<?php if( get_field('bio_2') ): ?>
     | <a href="<?php the_field('bio_2'); ?>" target="_blank">Download Bio (Español)</a> | 
<?php endif; ?>
<?php if( get_field('bio_3') ): ?>
    <a href="<?php the_field('bio_3'); ?>" target="_blank">Download Bio (Português)</a>
<?php endif; ?>
</p>
</div>
</div>