title: How to well organize elements (jsx/css) in react
body: <p>I want to create something that look like a mockup that I designed, but it start being messy, and it is hard for me to organize each elements as I wish to.</p>
  <p>This is what I'd like to display with my code:</p>
  <p><a href="https://i.stack.imgur.com/hk9R0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hk9R0.png" alt="enter image description here" /></a></p>
  <p>This is what I succeeded to display with my code:</p>
  <p><a href="https://i.stack.imgur.com/M2787.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M2787.png" alt="enter image description here" /></a></p>
  <p>But I feel my code is getting too complicated and I can't continue this way. I feel I'm on the bad way, in fact, so I ask to you some help.</p>
  <p>Here is my <strong>JS code</strong>:</p>
  <pre><code>import React from 'react';
  import classes from './BdrTargets.module.css';
  
  const bdrTargetsComponentFunc = (props) =&gt; {
  
      return(
          &lt;div&gt;
              &lt;h1 className={classes.FirstTitle}&gt;BDR targets&lt;/h1&gt;
              &lt;div className={classes.FirstSquare}&gt;
                  &lt;h3 className={classes.ProgressTarget}&gt;progress vs target&lt;/h3&gt;
  
                  &lt;div className={classes.Container}&gt;
                      &lt;p className={classes.LineName}&gt;opportunities number&lt;/p&gt;
                      &lt;p className={classes.LineName}&gt;total ACV&lt;/p&gt;
                      &lt;p className={classes.LineName}&gt;total potential ACV&lt;/p&gt;
                      &lt;p className={classes.LineName}&gt;total closing&lt;/p&gt;
                      &lt;p className={classes.LineName}&gt;average notes quality grades&lt;/p&gt;
                  &lt;/div&gt;
                  
                  &lt;div className={classes.Container2}&gt;        
                      &lt;p className={classes.ProgressTargetItem}&gt;progress_bar&lt;/p&gt;
                  &lt;/div&gt;    
                      &lt;h3 className={classes.WeeklyGoal}&gt;&lt;/h3&gt;
                      &lt;h3 className={classes.Monthly}&gt;&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default bdrTargetsComponentFunc;
  </code></pre>
  <p>And this is my <strong>CSS</strong>:</p>
  <pre><code>.FirstTitle{
      margin-top: 0px;
      padding-top: 25px;
      margin-left: 320px;
      font-family: system-ui, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, sans-serif;
      font-size: 29px;
      color: #262e39;
      font-weight: 400;
  }
  
  .FirstSquare{
      margin-left: 320px;
      height:350px;
      width: 1500px;
      border: 1px solid rgba(173, 173, 173, 0.2);
      background-color: #FAFAFA;
      /* background-image: linear-gradient(to right, #323E4D , #1E252E); */
  }
  
  .ProgressTarget{
      font-family: system-ui, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, sans-serif;
      font-size: 18px;
      color: #262e39;
      font-weight: 800;
      margin-left:330px;
      width: 200px;
      /* border-right: 1px solid rgba(173, 173, 173, 0.6); */
  }
  
  .ProgressTargetItem{
      float:left;
      padding-left: 280px;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  .LineName{
      width: 210px;
      padding-left: 40px;
      padding-bottom: 10px;
      padding-top:10px;
      font-family: system-ui, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, sans-serif;
      color: #262e39;
      font-weight: 500;
  }
  
  .Container{
      float: left;
      width: 50px;
  }
  
  .Container2{
      float:inline-end;
  }
  </code></pre>
  <p>Thank you <strong>very very much</strong> for your help</p>