текст в двух столбцах, где один столбец также обертывает текст вокруг изображения?

Question

, так что я возился с этим пару часов и не смог этого добиться. Я хочу иметь два столбца рядом друг с другом на рисунке ниже, но при этом сохранить текст, обтекающий эффект изображения. Я попытался сделать отображение текстового контейнера гибким, но затем я потерял текст, обтекающий поплавок.

вот 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>

введите описание изображения здесь