[SOLVED] How do I get CSS "width:auto" to give sizing priority to text alongside it within a DIV?

How do I get CSS "width:auto" to give sizing priority to text alongside it within a DIV?

I am using width:auto to have an image look reasonably sized on both desktop and mobile. My problem is that the image takes sizing priority to fit on the screen and bunches the text up on the right. I am hoping to have the image take 30% to 40% of the screen to leave room for the text on the right. I'll decide specifics in that regard once I see how it looks when working.

I have tried using max-width:40% with the width:auto for the image and for some reason the image becomes very small.

I have three different sections on the page I want to format with this style. This is the latest effort permutation of the HTML/CSS for one of them:I have been struggling with this for way too long and any help that can be provided would be greatly appreciated.

Other things I have tried to include putting both the image and the text in separate div sections and using max-width:30 and max-width:70 on each of those containers respectively. I've also tried using max-width: 30% directly on the image and the text free floating in the same container without a container defined specifically for the text.

    .writingsBox {
       display : flex; 
       max-width : 1600px;
       Padding-right : 15px;
       align-items : center;
       background-color : #EAE2BA;
    }

    }
    .leftImage {
       display:block;
       width: auto;
       max-width:333px;
       float:left;
       border : solid 3px;
       margin : 15px;
    }

    .blockLink {
       display : block;
       color : black;
    }

<!DOCTYPE html>
<html>

<body>
   <div class="writingsBox"><a class=blockLink href="https://thewebsite.text/thewebpage.html">
         <div style="display:inline;width:30%"><img src="https://i.sstatic.net/19E7G693.png"
               alt="Home Page Pic Travel Log" class="leftImage  pluginImg28" /></div>
      </a><a class=blockLink href="https://thewebsite.text/thewebpage.html">
         <div style="display:block;width:70%">
            <h1>Writings</h1>
            <font style="font-size:1.25em;font-color:black">This is where perspectives, ideas and general philosophies
               are
               dispensed in WebLogs and snippets to form a library of experiential outcomes. In other words, this is
               where
               I write what's on my mind.</font>
         </div>
      </a>
   </div>
</body>

</html>

Solution

The answer looks to be that the CMS framework around the site is causing the issue. I am using a HTML plugin on a wiki page to display this information. Everything has worked fine using this strategy and it didn't occur to me that the outer framework could cause this one singular problem of image resizing on mobile until I saw these suggestions confirming that previous attempts should have worked fine. I copied my HTML to a stand-alone page and it works fine. So now I have a different kind of problem to solve.

At the risk of TMI I would like to thank you for hanging in there with me to figure this out. I used to run highly technical teams in a very hand on way as a go-to sort of guy and am now in my 4th year of recovery from a brain injury. I am at a point now I am trying to make myself useful again. This may have seemed like a waste of time for you, but for me it has been more helpful, and meaningful, than one might guess. So thank you again for your help.