How to organize html and css better : First of all i am in the learning of coding so im very new to this. But im pretty sure i could set up my code a much better way than i have done, could anyone please help me out here and tell me what i can do better? Reason for asking is to be better on it! Thank you for your time guys!

HTML Code:

     <div class="infobox">
     <a href="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Suit+Jacket%22"><h3>Pinstripe Suit Jacket</h3></a>
          <div class="suggested">
              <div class="sug-text">
                 <h4 class="opskinsug">OPSkins Suggested:</h4>
                 <h4 class="survivorsug">Survivor's Suggested:</h4>
              </div>
              <div class="sug-price">
                 <h4 class="opssug">$0.26</h4>
                 <h4 class="survsug">$0.27</h4>
              </div>
            
         </div>

        
         <div class="cheap" id="pinstripe-jacket">
            <p> 40</p>
         </div>
 
     <img src="images/pinstripesuitjacket.png" width="300" >
         
     </div>

CSS Code:

    .infobox {
        background-color: rgba(0, 0, 0, 0.3);
        position: relative;
        text-align: center;
        border-style: solid;
        border-color: orange;
        border-width: 1px;
        border-radius: 25px;
        width: 250px;
        height: 300px;
        display: inline-block;
        margin-left: 20px;
    }
    
    .infobox a:link {
        color: #fff;
        text-decoration: none;
    }
    
    
    
    .infobox a:visited {
        color: #fff;
    }
    
    .infobox a:hover {
        color: black;
    }
    
    .infobox h3 {
        background-color: orange;
    }
    
    .infobox img {
          position: relative;
          top: -232px;
          left: 15px;
          z-index: 0;
    }
    
    .opskinsug {
        font-size: 13px;
        text-align: center;
        width: 100px;
        position: relative;
        left: -20px;
        z-index: 1;
        display: inline-block;
    }
    
    .survivorsug {
        position: relative;
        text-align: center;
        left: 20px;
        font-size: 13px;
        width: 100px;
        z-index: 1;
        display: inline-block;
    }
    
    .opssug {
        position: relative;
        text-align: center;
        width: 100px;
        left: -20px;
        font-size: 20px;
        color: #fff;
        top: -40px;
        z-index: 1;
        display: inline-block;
    }
    
    .survsug {
        text-align: center;
        position: relative;
        width: 100px;
        font-size: 20px;
        left: 20px;
        top: -40px;
        color: #fff;
        z-index: 1;
        display: inline-block;
    }
    
    .suggested {
        background-color: rgba(255, 165, 0, 0.4);
        height: 70px;
        position: relative;
        z-index: 1;
        
    }
    
    .sug-text {
        position: relative;
        top: -5px;
    }
    
    .sug-price {
        position: relative;
        top: -8px;
    }
    
    .cheap {
        position: relative;
        z-index: 1;
        font-size: 52px;
        display: inline-block;
        left: -70px;
        color: #fff;
    }

