Displaying Connected Posts in a Grid using PHP Loop - php

Question

I've been searching through the forums and Google for a few days on how to resolve this and have yet to find a solution. Any assistance would be greatly appreciated.
Bottom line, I am looking to achieve this:
Speaker Section
Using Firebug to inspect the element, I've determined which classes apply:
<div class="et_pb_section et_pb_section_8 et_pb_with_background et_section_regular">
<div class=" et_pb_row et_pb_row_6">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_10">
<div class="et_pb_blog_grid_wrapper">
<div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_ et_pb_cpt_loop_archive_0 et_pb_cpt_archive_grid" data-columns="">
<div class="et_pb_row et_pb_row_cpt et_pb_row_4col">
<div class="et_cpt_container_column et_pb_column et_pb_column_1_4 et_pb_column_0">
<div class="et_pb_section et_pb_section_10 et_section_regular">
<div class=" et_pb_row et_pb_row_7">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_11">
<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off desaturate et_pb_cpt_featured_image2_0 et_always_center_on_mobile et-animated">
<a href="http://meetingoftheminds.org/speaker/scot-rourke"><img src="http://meetingoftheminds.org/wp-content/uploads/2017/03/Scot-Rourke.jpg" alt="">
</a>
</div>
<div class="clearfix et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_cpt_title_0">
<h2 itemprop="name" class="cpt_title page_title entry-title">Scot Rourke</h2>
</div>
<div class="clearfix et_pb_module et_pb_acf_single_item_0">
<div class="sb_mod_acf_single_item clearfix">
<p>‎Chief Information and Transformation Officer, Technology, Innovation & Performance</p>
</div>
</div>
<div class="clearfix et_pb_module et_pb_acf_single_item_1">
<div class="sb_mod_acf_single_item clearfix">
<p>Cuyahoga County</p>
</div>
</div>
</div>
<!-- .et_pb_column -->
</div>
<!-- .et_pb_row -->
</div>
<!-- .et_pb_section -->
</div>
I then tried to tailor this to my PHP Loop but the result is radically different than expected.
Here is the snippet of the original loop:
<?php
// Get the connected posts
$my_connected_posts = Post_Connector::API()->get_children( "sessions-to-speakers", get_the_id() );
// Check
if ( count( $my_connected_posts ) > 0 ) {
// Loop
foreach ( $my_connected_posts as $my_connected_post ) {
// Display the featured image, title with link, job, and company
echo get_the_post_thumbnail( $my_connected_post, 'thumbnail') . "<br/>";
echo "<a href='" . get_permalink( $my_connected_post->ID ) . "'>" . $my_connected_post->post_title . "</a>" . "<br/>";
echo get_field("job", $my_connected_post) . "<br/>";
echo get_field("company", $my_connected_post) . "<br/>";
}
}
?>
Original loop displays posts vertically down the page as shown here:
Connected Posts
Here is the snippet of the modified loop, using the "Speaker Section" classes, which only seems to resize the thumbnails:
<!-- Speaker Section -->
<div class="et_pb_section et_pb_section_8 et_pb_with_background et_section_regular">
<div class=" et_pb_row et_pb_row_6">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_10">
<div class="et_pb_blog_grid_wrapper">
<div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_ et_pb_cpt_loop_archive_0 et_pb_cpt_archive_grid" data-columns="">
<div class="et_pb_row et_pb_row_cpt et_pb_row_4col">
<?php
// Get the connected posts
$my_connected_posts = Post_Connector::API()->get_children( "sessions-to-speakers", get_the_id() );
// Check
if ( count( $my_connected_posts ) > 0 ) {
// Loop
foreach ( $my_connected_posts as $my_connected_post ) {
// #speaker section
echo '<div class="et_cpt_container_column et_pb_column et_pb_column_1_4 et_pb_column_0"><div class="et_pb_section et_pb_section_10 et_section_regular">';
echo '<div class=" et_pb_row et_pb_row_7">';
echo '<div class="et_pb_column et_pb_column_4_4 et_pb_column_11">';
// Display the featured image, title with link, job, and company
echo '<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off desaturate et_pb_cpt_featured_image2_0 et_always_center_on_mobile et-animated">';
echo get_the_post_thumbnail( $my_connected_post, 'thumbnail') . "<br/>";
echo '</div>';
echo '<div class="clearfix et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_cpt_title_0">';
echo "<a href='" . get_permalink( $my_connected_post->ID ) . "'>" . $my_connected_post->post_title . "</a>" . "<br/>";
echo '</div>';
echo '<div class="clearfix et_pb_module et_pb_acf_single_item_0">';
echo '<div class="sb_mod_acf_single_item clearfix">';
echo get_field("job", $my_connected_post) . "<br/>";
echo '</div>';
echo '</div>';
echo '<div class="clearfix et_pb_module et_pb_acf_single_item_1">';
echo '<div class="sb_mod_acf_single_item clearfix">';
echo get_field("company", $my_connected_post) . "<br/>";
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
}
?>