Estoy explorando el movimiento Framer. Esto podría ser más una pregunta de css.

Tengo una imagen de una flor que gira cuando haces clic en ella:

 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;

a continuación se muestra el .css solo para que la flor tenga el tamaño correcto:

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

Y estoy tratando de crear algo que se vea así:

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

Pero la imagen de la flor cuando se usa motion.div siempre va debajo del texto. A continuación se muestra el App.js real de la página:

 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> ); }

También he explorado el uso de bloques en línea como <span> Mi css se ve así:

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

Muchas gracias