Displaying nested divs on the same line - html

Question

I am working with a react component that produces nested divs. I'd like to style force the divs to be on the same line but can only declare styles on the outer container div. Is there a way to achieve this without styling the inner divs? If only I can pass style to the "hello" div.
Currently:
hello
secondLine thirdLine
Desired:
hello secondLine thirdLine
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>

Answer 1

make the outer div display: 'flex'
<div style={{ textAlign: "left", whiteSpace: "nowrap",display:"flex" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{ }
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
For more reference :details

Answer 2

if you have access and can change the HTML change the inner <div> to <span> or any inline element, the parent div have display:inline and inner div will take full width ignoring parent having inline display, because the inner div have default display block:
<div style="textAlign:left, whiteSpace:nowrap">
<div style="display:inline">
<span style="display:inline">hello</span>
</div>
<div style="display:inline"> secondDiv </div>
<div style="display:inline"> thirdDiv </div>
</div>
for your jsx code it should be like:
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<span>hello</span>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>