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

.boxes{
width:300px;
display:grid;
grid-template-columns:1.4fr 2fr;
border:2px solid;
padding:5px;
}

.boxes .right{

display:flex;
flex-direction:row;
justify-content:space-between;
}

<div class="boxes">
<div class="left">
<p>test</p>
</div>
<div class="right">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>

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>
                    <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> -->
                            <span><b>10000000</b></span>
                        </div>
                        <div>
                            <template for_each={city.sumchans__City_Stats__r} for_item="stats">
                                <div key={stats.Id}
                                    style="color: rgb(197, 81, 61);font-size:14px;">
                                    <span><strong>{stats.sumchans__Penetration__c}%</strong></span></div>
                            </template>
                        </div>
                    </div>
                </div>
                <hr class="divider" key={city.Id}>
            </template>
        </div>
        </lightning-card>      
    </div>

CSS:

 .divider { 
    margin-top: 3px; 
    margin-bottom: 2px;
    border-width:0.2px; 
    border: 1px dotted #81b9fa;
    border-style: none none dotted; 
}
.titleDivider {
    margin-top: 1px; 
    margin-bottom: 1px;
    border-width:3px; 
    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 {
    height:180px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
}
.city-scroll-section::-webkit-scrollbar {
    width: 0px;
}