If you are aiming for a design similar to the example you provided, it's recommended to avoid using tables as they can be cumbersome and outdated. Instead, consider utilizing flexbox, which offers a straightforward method of aligning elements and creating visually appealing layouts.
For instance:
body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.resume {
display: flex;
align-items: center;
justify-content: center;
}
.resume-picture {
border: 10px solid #1976D2;
border-radius: 50%;
background: #f3f2f1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 175px;
}
.resume-content {
padding: 0 15px;
}
.resume-content h2 {
color: #1976D2;
margin-top: 0;
}
.resume-content p {
color: #333;
margin: 0;
}
<div class="resume">
<img class="resume-picture" src="https://avatars2.githubusercontent.com/u/3534427?v=3" />
<div class="resume-content">
<h2>My Resume</h2>
<p>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.</p>
</div>
</div>
Hopefully, this aligns with what you had in mind.