I'm exploring Framer motion. This might b e more of a css question.

I have an image of a flower that rotates when you click it:

import React from 'react';
import { motion } from 'framer-motion';
import Flower1 from '../images/flowerTrans.png'; // gives image path
import styles from './components.module.css'
const Rotate = () => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <motion.div
      onClick={() => setIsActive(!isActive)}
      animate={{
        rotate: isActive ? 90 : 0,
      }}
    >
      <img src={Flower1} className={styles.flower} alt="this is a flower" />
    </motion.div>
    
  );
  
};

export default Rotate; 

below is the .css just to make the flower the right size:

.flower {
  height: 50px;
  width: 50px;
}

And I'm trying to create a something that looks like this:

<p>some text</p> <img OF FLOWER GOES HERE SIDE BY SIDE WITH TEXT />

But the flower image when using motion.div always goes underneath the text. Below is the actual App.js of the page:

import "./styles.css";
import Rotate from './components/Rotate'
// import './styles.css'

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div class="container">
  <p> hello <Rotate /></p>
  <p> 2 </p>
  <p> 3 </p>
</div>
      <span>Start editing to see some! 
      </span>
    </div>
  );
}

I've also explored using inline blocks such as <span> My css looks like this:

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
}

Thanks so much