Having Trouble Inlining elements in PDF

[Jonathan]

RadFlowDocument document = provider.Import(htmlContent, new TimeSpan(0, 0, 0, 30));

I have a PDF that's supposed to use bootstrap styles, and I'm having trouble applying them.  I have three divs that need to be in-line but they keep end up on their own line instead.  They are an image, then a title, then another image.  All need to be on one line.  But bootstrap, flex, whatever I throw at it, they keep going on their own lines instead, like block elements.

I want:  image/title/image

I get:

image
title
image

Here's the cshtml:

@using Kendo.Mvc.Extensions


<link href="~/Content/css/sprite.css" rel="stylesheet" />
<link href="~/Content/css/build/report.css" rel="stylesheet" />

<style>
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex !important;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-0.5 * var(--bs-gutter-x));
        margin-left: calc(-0.5 * var(--bs-gutter-x));
    }

    .row > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: var(--bs-gutter-y);
    }
    .tbox {
        display: table;
        width: 100%;
        height: 100%;
        border-spacing: 0;
        table-layout: fixed;
        outline: 5px solid red;
    }

    .tcol
    {
        display: table-cell;
        float: none;
        height: 100%;
        vertical-align: top;

    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
</style>


<div class="row">
    <div class="col-md-offset-1 col-md-10 col">
        <div class="tbox" style="height: auto; display: flex !important">
            <div class="tcol" style="width: 25%">
                <img class="logo" src="URI" alt="official seal" />
            </div>
            <div class="tcol text-center" style="width: 25%">
                <h1 class="m-15">
                    TITLE OF PDF
                </h1>
                <h2> @Model.ProjectNumber Project Plan </h2>
                <h4 class="datestamp">@DateTime.UtcNow.UtcToApplicationTimeZone().ToString("MM/dd/yyyy")</h4>
            </div>
            @if (Model.ProgramId == (Int32)EnumRefProgram.ABCDEF)
            {
                <div class="tcol text-right" style="width: 25%">
                    <img class="logo" src="URI" alt="official seal" />
                </div>
            }
            else
            {
                <div class="tcol text-right" style="width: 25%">
                    <img class="logo" src="URI" alt="official seal" />
                </div>
            }
        </div>
    </div>
</div>

This isn't the whole document, just the relevant part I'm struggling with.  Linking bootstrap directly didn't work (and seemed like a bad idea anyways due to its size) so I just started copying in the relevant classes into the style tag.  The .row class alone should be sufficient to make the three divs (the two images and the title) all inline in one line, but it seems to have no effect in the PDF.  I also tried making one of the divs a flex container by giving it display:flex and again, no effect.  If I grab the HTML string from the debugger, the moment before it is fed into this: RadFlowDocument document = provider.Import(htmlContent, new TimeSpan(0, 0, 0, 30)); and I take that html and save it as an html document and open it in my browser, the classes work appropriately, the image/title/image display inline as desired.  So I know the mark up and the CSS are functional, but I don't get why it doesn't work with the conversion to PDF.

I'm also aware that putting flex in one of the divs inside a .row div is redundant but I was trying to figure out what wasn't working.