forced line break after span coming from react, next or bootstrap?

Hello,

This is a bit of a mystery, I am wrapping some text in span tag and it is forcing a line break after it. I don't know if it is React.js, Next.js or Bootstrap, but I can't seem to remove the line break

Check out this page, it is the phone number at top of page.
https://wordpress-website-headless-v2-ep3x6ohy1.vercel.app/

I have already tried using boostraps text-nowrap tag, I also added white-space:nowrap; to every class . I assume React.js is doing this, but who knows

html

    <Col xs={6} md={8} className="text-right header-phone text-nowrap">
                         <span className="phone-msg text-nowrap">To Purchase Artwork Call:</span> <a href="tel:416.450.5439" className="text-nowrap">416.450.5439</a>
                      </Col>

Select allOpen in new window

     
css

    .phone-msg{
        display: block;
        white-space:nowrap;
    }
   
    .header-phone{
        font-size: 20px;
        color: #000000;
        font-weight: 800;
        white-space:nowrap;
        }
   
    .header-phone a:link, .header-phone a:active{
        color: #c65f0a;
        text-decoration: none;
        margin-right: 15px;
        white-space:nowrap;
    }
    .header-phone a:hover{
        color: #000000;
       
    }

Select allOpen in new window