Solution 1 :

You can do with display:flex; and justify-content: space-between; , elements inside .boxes will take margin according to width of .boxes

grid-template-columns:1.4fr 2fr;
border:2px solid;

.boxes .right{

<div class="boxes">
<div class="left">
<div class="right">

Problem :

In the below picture, How do I get rid of overlapping divs. Was trying flexbox for my setting, but was not able to fix the issue, now I am on CSS gird system. I am trying to have the icon,then a small gap, then the number fully visible on the same line, then again a small gap and finally the red number visible to the far right. Below is my CSS and HTML:

<div class="main-container">
        <lightning-card class="slds-p-right_small" variant="narrow" icon-name="utility:tracker">
            <h1 slot="title" style="font-style:normal; font-family:'Candara';"><strong>BRITISH COLUMBIA</strong></h1>
            <hr class="titleDivider">
            <div id="bcDiv" class="city-scroll-section" onscroll={loadMoreonScrollEnd} data-id="BC">
            <template for_each={bc} for_item="city">
                <div class="grid-container" key={city.Id}>
                    <div class="grid-column-cityName">
                        <div style="color: rgb(28, 69, 145);"><strong>{city.Name}</strong></div>
                    <div class="mini-grid-container">
                        <div style="display: grid; grid-template-columns:1fr 3fr">
                            <span><lightning-icon icon-name="utility:company" size="small"></lightning-icon></span>
                            <!-- <span><b>{city.sumchans__Total_Buildings__c}</b></span> -->
                            <template for_each={city.sumchans__City_Stats__r} for_item="stats">
                                <div key={stats.Id}
                                    style="color: rgb(197, 81, 61);font-size:14px;">
                <hr class="divider" key={city.Id}>


 .divider { 
    margin-top: 3px; 
    margin-bottom: 2px;
    border: 1px dotted #81b9fa;
    border-style: none none dotted; 
.titleDivider {
    margin-top: 1px; 
    margin-bottom: 1px;
    border-color:rgb(36, 36, 71);
.main-container {
    display: grid;
    justify-content: center;
    /* width:500px; */
.grid-container {
    display: grid;
    grid-template-columns: 60% 40% ;
    /* grid-template-rows: auto;  */
.grid-column-cityName {
    margin: 10px 0px 10px 7px;
    border-radius: 5px;
    /* background-color: rgb(249, 252, 255); */
.mini-grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
.city-scroll-section {
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
.city-scroll-section::-webkit-scrollbar {
    width: 0px;

enter image description here


Comment posted by Azametzin

Please, post the rendered HTML. It’s better to see the result to debug.

Comment posted by Michael Benjamin

The code you posted doesn’t reproduce the problem.

Comment posted by Sumchans

@Azametzin, Not sure what rendered HTML is?

Comment posted by Sumchans

@Michael_B, it does on my testing.

Comment posted by Sumchans

how do i make the first p take majority of the space and have everything on the same line, not wrap to the next line. Also it would be okay to wrap the first


Comment posted by Sudarshan Rai

I have updated the code please see above code again