I'm trying to edit a CANVAS page but I think I've done something wrong with the inline-block so my image and text doesn't sit side by side

Normally I would use a CSS page, but i don't think i can do that with canvas :(

<div id="Bell_hooks" class="">
<h3><i class="fas fa-chalkboard-teacher" aria-hidden="true"> </i>Philosopher's perspective - <em>Bell Hooks</em></h3>
</div>
<div style="display: flex;">
<div>
<p><img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366" /></p>
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life. In the first few chapters of book, Hooks brings up the state of the newer generations' views on love, in which she states how she was "sad" and "appalled" at how the younger regards love and romance culture, quoting the reply of someone she had interviewed: "Love what's that, I have never had any love in my life". Hooks comments on the more modern view on love, in which claims that more and more younger people are defining love as something "for the na&iuml;ve, the weak, the hopelessly romantic.". After bringing up her viewpoint, Hooks presents a theory in which she theorises that our cynicism stems from the reoccurring feeling that love will not and cannot be found, on which she expands by theorising that this is ultimately because we are simply trying hide behind the mask of cynicism to hide our disappointed and betrayed heart. In her book, Hooks quotes multiple other philosophical works such as When all you've ever wanted isn't enough (Harold Kushner) and Bitch: In Praise of Difficult Women (Elizabeth Wurtzel), in which both works theorise that the newer generation are growing up much more apprehensive about loving, and that "None of us are getting better at loving: we are getting more scared of it."</p>
</div>
</div>

this is my full code, but once i add the flex display the image shrinks to the size of one line of text, is there any way to fix that?

here's what it looks like now

Solution

This is an example using flexbox. Wrap your divas in a container and give it a display: flex.

<div class="container" style="display: flex">
  <div>
      <img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366">
  </div>
  <div>
      <p>In her 1999 book "All about love"  Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life</p>
  </div>
</div>