分两列显示文字，其中一列还可以在图像周围包裹文字？

Question

所以我已经把这个弄糟了几个小时，却没能做到这一点。我想在下面的图片中将两列彼此相邻，但还要保留环绕图像效果的文字。我尝试使文本容器显示为flex，但是随后我松开了围绕浮点数的文字。

这是CSS：

const styles = () =>({
    container:{
        width:'75%',
        marginBottom: 30,
        borderRadius:10,
        padding: 10, 
    },
    image:{
        height:'calc(100vh * .4)',
        width:'calc(100vh * .4)',
        borderRadius:'50%',
        float:'left',
        shapeOutside:'circle()',
        boxShadow: '-15px 20px 20px #d9731a',
        margin:20,
        '& img':{
            height:'100%',
            width:'100%',
            borderRadius:'50%',
            objectFit:'cover',
        },
    },
    textContainer:{
        marginTop:200,
        width:'90%',
        marginLeft:'calc((100vh * .4) * .5)',
        backgroundColor:'#14a797',
        padding: 30,


    },
    text:{
        width:'40%',
        textAlign:'justify',
        paddingRight:20
    }
   
})

这是标记：

 <div style={{paddingTop:147, display:'flex', justifyContent:'center', height:'100%'}}>
            <div className={classes.container}>
                <div className={classes.image}>
                    <img src={C1} alt={'About us'}></img>
                </div>
                <div className={classes.textContainer}>
                        <p className={classes.text}>
                            Lorem ipsum ...
                        </p>
                        <p  className={classes.text}>
                            Lorum ipsum...
                        </p>
                        
                </div>
                
            </div>
        </div>

enter image description here