Diseño de cuadrícula con una fila con 3 elementos que el ancho de cada elemento es automático

Tengo problemas para lograr este diseño:

Necesito que el ancho de los elementos derecho e izquierdo sea automático y cubra todo el espacio vacío a la derecha e izquierda del elemento que está en el centro.

Esto es lo más parecido que pude hacer, pero el problema es que el ancho del elemento del centro se fija a 2 de las 12 unidades del contenedor y las líneas derecha e izquierda se fijan a 5 unidades cada una

<Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}>
    <Grid item xs='5'>
        <Divider />
    </Grid>
    <Grid item xs='2'>
        <span>or</span>
    </Grid>
    <Grid item xs='5'>
        <Divider />
    </Grid>
</Grid>

Estoy usando la biblioteca material-ui reactjs. ¿Alguien puede ayudarme? Estoy dispuesto a ayudar ya sea usando la biblioteca de interfaz de usuario de material o con una respuesta css / js