How to wrap multiple div without changing inner div posittion

So I’m having this issue, I’m coding a basic website using NextJS, this is an example of my code

I have a set of div like this with relative positioning

<div>one</div>
<div>two</div>
<div>three</div>

output it looks something like this

one two three

Now I want to wrap all 3 divs inside another div with absolute positioning so I can change its position freely across the screen

<div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

But doing that will change inner div layout to this

one
two
three

So basically, how do I wrap multiple divs inside another div without changing inner div position?

>Solution :

Try this in your CSS code for the inner divs:

display: inline-block;

and this for the outer div:

width: fit-content;

See this jsfiddle demonstration