Estoy trabajando en un ReactJs y tengo que diseñar un div dentro de una cadena
Aquí está la cadena de la que estoy hablando
const instruction1 = <div>XXXXXX: xxxx <div>{state.numbers[0]}</div>, xxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxx xxxxxx xxxxxxxxxx</div> Pero el resultado es algo como esto. 
Pero necesito que el resultado sea así.
El problema es que tengo que usar un div porque habrá múltiples elementos dentro de ese div.
¿Por qué el uso de la etiqueta div estropea el diseño?
div es un elemento de bloque, significa que en el HTML se verá como en una nueva fila. Intenta usar span en su lugar. No romperá la línea.
Actualización: no estoy seguro de por qué necesita div en absoluto. Parece que podrías poner tus elementos directamente en el div raíz:
<div>XXXXXX: xxxx {state.numbers[0]}, {state.numbers[1]}, xxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxx xxxxxx xxxxxxxxxx</div>Para solucionar esto, envolví el div en un span y le di display inline-block a ese span