How to add <h1> tag without break the site layout?

Hello, can someone give me some help here, please?

How to add <h1> tag in the <?php echo substr(get_the_title($post_name), 0, 20); ?> without break the site layout?

<div class="blkBar topratings">
<i class="galBIcon"></i>
<?php echo substr(get_the_title($post_name), 0, 20); ?>
<span class="custom-rating">
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<span class="page_post-titl">Gallery Rating</span>
</span>
</div>

PHP:

This is how it looks without the <h1> tag:
https://prnt.sc/GtjJMyKvgNMG

This is how it looks after I add the post title between the <h1> tags:
https://prnt.sc/vVkWRU9Nxqcf

<h1><?php echo substr(get_the_title($post_name), 0, 20); ?></h1>

PHP:

.blkBar, .grnBar {
margin: 15px 0px;
background: #000 url(../images/bar-pnk.png) right top no-repeat;
border-radius: 5px;
padding: 5px 15px 2px;
font-size: 24px;
line-height: 36px;
color: #fff;
font-family: 'AvenirNextLTPro-Bold';
text-align: left;
text-transform: uppercase;
position: relative;
}
span.custom-rating {
display: block;
margin-top: -5px !important;
margin-bottom: 0px !important;
height: 43px;
width: 237px;
position: relative;
float: right;
}

Code (markup):

I need to show exactly how it looks but with the <h1> tag.
Can someone help me, please?

Thank you in advance.

 

Hi Divvy,
Can you please try CSS property "display:flex", you have to use this property into blkBar class as mentioned in screenshot

 

Thanks i now understand it. Cheers!!!

 

Alright Dear