React JS floated tag around a component, is position absolute a prudent idea?-CodePudding

I would like to get involved in something perhaps complicated. I would like to create the following render (see image below) with React JS. However, I thought it would be prudent to begin by using position: absolute and repositioning my divs accordingly. However, it appears to be a difficult idea at first glance, considering the number of tags I desire (floated around the main component) for the responsive aspect and the sake that moving them with some pixel will be an indefinitely task. As a result, I was wondering whether there is a plug-in or if you have any suggestions for resolving this particular aspect. Additionally, remember that if you like to respond, it is OK to do so using basic coloured square-rectangles; I am looking forward to learning how to apply such a thing not the specific design.

Today, I have the following, but it would be unmanageable to perform this for each and hope for the best during responsive resizing.

My current code:

React JS divs:

profile_picture = () => {
return (
  <div className="profilepicturetechstack">
    <div className="home">
      <div className="frame-1-3">
        <img src="./resources/simon-provost-02-min.jpg"  alt="profile_pic"/>
      </div>
      <div className="photo--wrapper--ellipse">
        <p className="text-4">ML/RESEARCH</p>
      </div>
      <p className="text-1">Simon provost</p>
      <p className="text-2">Paris, France</p>
    </div>
    <div className="frame-1-4">
      <p className="text-7">⚙️ Machine Learning</p>
    </div>
    {/*<div className="frame-1-9">
      <p className="text-8">