Single event display

I use Elementor to add text and picture in the Note section of the event during creation of an event. I have two columns, one for an image and the other for text. In the event setup page, the image and text display side by side as intended. But when rendering the event page in the front end, they are not rendered side by side, instead they are stacked together like in a single column. Is there a way to make the display same as in Elementor? I am putting the code for my Single Event Page Format in the code section.

{no_category_28}
<div style="float:left; margin:0px 0px 15px 0px; width:100%;">#_LOCATIONMAP</div>
{/no_category_28}
<p>
	<strong>日期/時間</strong><br/>
	日期 - #_EVENTDATES<br /><i>#_EVENTTIMES</i>
</p>
{has_location}
<p>
	<strong>設施</strong><br/>
	#_LOCATIONLINK
</p>
{/has_location}
<br style="clear:both" />
#_EVENTNOTES
{no_category_28}
<p>
     <strong>Maximum number of spaces = #_SPACES <br>
     Current available spaces = #_AVAILABLESPACES </strong><br>
</p
<p>
	<strong>Categories</strong>
	#_CATEGORIES
</p>

<br style="clear:both" />
{/no_category_28}

{has_bookings}
<h2>Bookings</h2>
#_BOOKINGFORM
{/has_bookings}