What's the float:left; equivalent in Grid since float is not supported?

Question

There appears to be a few questions around this already, but none of the questions have the answer to this question...

I have a SVG image in an inline-grid and I would like to have it to the left of the text just like I would do it with float:left;, but there appears to be a known bug that makes it impossible.

So the question is - how do I place the image to the left so that it displaces the text on the left side just like float:left; would?

.company-content {
    width: 79%;
    display: inline-grid;
}

<div class=company-content>
  <p>
    <div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>

P.S. Yeah, I've tried justify-self:start;, doesn't appear to work...

Answer 1

I think you have mixed inline and flex which has different approaches to the layout. and second you gave container and item both inline-grid property. and What you want to do is "<p>" with "<img>" inside a "<div>" but you give "<div>" inside "<p>" you can use "<span>" inside "<p>" If I understand your request correctly, the following codes are what you want

.company-content {
    width: 79%;
    display: inline-grid;
}

<div class=company-content>
  
    <p><span style="width:10%; height:10%; "><img src="https://picsum.photos/500" style="width:3rem; height:3rem; float:left" /></span> Lorem Ipsum blablabla bla bla bla bla</p></div>