I’m having a hard time wrapping text around images using floats, I’ve been constantly trying to resize. I am using a tutorial to learn and no matter what I do it never works. I want to find a solution to this problem. WhenStrong text I try to add anything to make it better, it gets worse for some reason. A good explanation of what I did wrong would be nice, thanks.

.contact {
 padding-top: 2rem;

}
.contact-item{
 margin-bottom: 3rem;
}
.contact-title{
 color: var(--primaryColor);
font-family: var(--slantedText);
text-transform: uppercase;
letter-spacing: calc(var(--letterSpacing) * 2);
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.contact-text{
 text-transform: uppercase;
 
}
.form-control{
 display: block;
 width: 100%;
 border: none;
 border-bottom: 2px solid var(--primaryColor);
 outline:none;
 margin: 2rem 0;
 padding: 1.3rem 0;
 font-size: 0.85rem;
 font-weight: bold;
}
.form-control::placeholder{
 color: var(--primaryColor);
 text-transform: uppercase;
 letter-spacing: var(--letterSpacing);
}
@media screen and (min-width: 992px) {
 .contact-info,
 .contact-form {
  /* float:left ; */
  width:50%;
  
  ;
 }
 
}
<section class="contact">
   <div class="section-center clearfix">
    <!-- contact info -->
    <article class="contact-info">
     <!-- contact item -->
     <div class="contact-item">
      <h3 class="contact-title"> <span class="contact-icon"> <i class="fas fa-location-arrow"></i></span>address
      </h3>
      <h3 class="contact-text"> Lorem</h3>
     </div>
    </article>
    <!-- end of contact ite -->
    <!-- contact item -->
    <div class="contact-item">
     <h3 class="contact-title"> <span class="contact-icon"> <i class="fas fa-phone"></i></span>phone
     </h3>
     <h3 class="contact-text"> +124 456 789</h3>
    </div>
    </article>
    <!-- end of contact ite -->

    <!-- contact item -->
    <div class="contact-item">
     <h3 class="contact-title"> <span class="contact-icon"> <i class="fas fa-envelope"></i></span>email
     </h3>
     <h3 class="contact-text">email@email.com</h3>
    </div>
    </article>
    <!-- end of contact ite -->
    <!-- contact form -->
    <article class="contact-form">
     <form class="form-group">
      <input type="text" name="name" placeholder="name" class="form-control">
      <input type="email" name="email" placeholder="email" class="form-control">
      <textarea name="message" class="form-control" placeholder="message" rows="5"></textarea>
      
      <button type="submit" class="main-btn"> send</button>
     </form>
    </article>
   </div>

  </section>