Text outputting below div

It works fine and is centred when the text is smaller, but for longer lines the text is outputted below the division

Below is the code. Its a div with 2 div side by side, where in the left div has an imp. I want text to be centred in the right div.

<div style={{ height:’12rem’,textAlign:’center’, lineHeight:’12rem’, backgroundColor:’#edf2f4′}} className=”shadow rounded”>
<div style={{width:’30%’, float:”left”, height:’10rem’}}>
<img src={bruce} style={{ width:’100%’, height:’10rem’, objectFit:’contain’}} />
</div>
<div style={{ float:”left”, paddingLeft:’2rem’, overflow:’auto’}}>
<p>vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv</p>
</div>
</div>