I would like to know how I can vertically center align text and pictures to create a website section like this: 
I want align the logos and the text on the company names that are on the left of that picture. I would like to center the logos to the text next to it and their description.
HTML:
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=v3Fie3AFMrA">
<div class="overlay subSection container-fluid">
<div class="row justify-content-center">
<div class="overlay-cell clearfix">
<div class="col-sm-12">
<h1 class="display-2 ">Research</h1>
</div>
</div>
</div>
</div>
</div>
<section id="about">
<h5 class="text-center pb-3">Discovering The Future.</h5>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-2">
<img src="assets/caolab.png" width="75" height="75" alt="" class="img-fluid testphoto">
</div>
<div class="col d-flex align-items-center">
<h2>The Cao Lab</h2>
<h3>April 2016 – Present</h3>April 2016 – Present
</div>
<div class="col-md-5 offset-2">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.testphoto {
display: inline-block;
vertical-align:middle;
}
.labname{
display: inline-block;
vertical-align:middle;
border:solid black 1px;
}
UPDATED QUESTION
Thanks a lot to @WebDevBooster for providing the solution below. However, I have realized a few issues that I've encountered. Though similar to the code posted below, I made some changes to reflect exactly what I'd like, however, It does not act in a responsive manner. In efforts to be concise and clear, i have bulleted the issues explicitly in a list:
As the browser window shrinks towards mobile sizes, the list becomes really narrow, and the picture/video items on the right become really small and aesthetically unpleasing. I think this is partially due to the fact that I am unable to get the picture/video items on the right move below the column with all of the bullet points to allow the list items to expand out more to the right.
I'd like all elements to take up full width (width the default padding of course) of the screen as the site becomes smaller. Essentially this means that the right-most column containing the video player and the cartoon would move below the entry to its left. Something like this sort of (this is a style from another part of my site):
the idea being that the logo will stack above the company name (at a larger size to fill up the screen), and the picture/video on the right of the ul will stack below. I want to keep this look if the screen is large enough (desktop):
while avoiding this in mobile view:
HTML:
<section id="about">
<div class="container">
<h3 class="font-weight-bold text-center">Discovering The Future.</h3>
<div class="row mt-4">
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>The Cao Lab</h2>
<h3 class="font-weight-bold pt-1 pb-3">April 2016 - Present</h3>
<ul>
<li class="pb-3">Employ alkene metathesis to produce porous molecules valuable for encapsulation and adsorption applications</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret results for molecules of interest</li>
<li class="pb-3">Communicate research to others by attending conferences and poster presentations</li>
<li class="pb-5">Devised a cost-effective method to quantify hydrogen production during evolution experiments</li>
</ul>
</div>
<div class="col-sm-3 ">
<div class="embed-responsive embed-responsive-5by3 teensie">
<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/KPZ8HHRR1A0"></iframe></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>Institut Parisien de Chimie Moléculaire
</h2>
<p class="text-primary">National Science Foundation Internation REU Program.</p>
<h3 class="font-weight-bold pb-3">May 2017 - August 2017</h3>
<ul>
<li class="pb-3">Conduct study on the selective deprotection of perbenzylated a-cyclodextrin to access novel functionalization</li>
<li class="pb-3">Synthesize molecules suitable as ligands in metal-catalysis and for improving chiral HPLC discrimination ability</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret data of cyclodextrin derivatives</li>
<li>Submitted abstract to present at the Chemical Education Division of the 255th ACS National Meeting</li>
</ul>
</div>
<div class="col-sm-3 ">
<img src="https://vignette.wikia.nocookie.net/rayman/images/c/cf/Teensy.png" alt="" class="img-fluid teensie2 ">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.shift{
margin-left:20px;
}
.barbie{
list-style: none;
margin: 0;
padding: 0;
}
.barbieitem{
//text-align: right;
font-size: 1.3em;
}
.testphoto {
display: inline-block;
vertical-align:middle;
}
.joblist{
display: inline-block;
}
.labname{
display: inline-block;
vertical-align:middle;
border:solid black 1px;
}
.youtube {
max-width: 300px;
max-height: 300px;
position: relative !important;
float: right;
}
.teensie{
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.teensie2{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/s8gNh.jpg', '推荐 戒情不戒烟 的文章《Vertically centering images to text in a multi-col》','https://www.manongdao.com/article-947799.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}