Positioning Label controls in bootstrap Row using CSS

I have two label controls in a "col-md-6" div tag. The two labels appear in the top-left of the tag. How do I shift the second label to the right? I tried to use CSS style – “float: right;” but it’s not working

HTML and CSS

                                <div class="col-md-6">
                                    <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                        <div class="col p-4 d-flex flex-column position-static">
                                            <div class="row" style="font-family:Comfortaa;font-size:12pt;font-weight:bolder;">
                                            <asp:Label ID="recptlbl" runat="server" Text=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                          &nbsp;<div class="lbl4"><asp:Label ID="lblupld" runat="server" Text=""></asp:Label></div>
                                            </div>
                                            <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                <img alt="" src="images/indeximg/recpt.jpg" height="30" />&nbsp;Reciepts</h3>
                                            <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                           <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click"/>
                                        </div>
                                    </div>
                                </div>

#lbl4{
    float: right;
}