Adjusting positioning of items in a CSS grid based on contents

I have a CSS grid with three elements in it. A header and two content areas. My grid is defined as having two 50% width columns

.my-grid {display: grid;grid-template-columns: 50% 50%;}

What I am trying to achieve is some repositioning when my header element's content is long enough. Eg:

I do not want to use JS or have to use unique classes to achieve this. I want it to work automatically based on how wide the header is. Is it possible in pure CSS?