text: Q:
  
  one div to wrap once it butts up against another div and not stack on it
  
  Is there a way I can make the blue div wrap text once it butts up against the yellow div instead of stacking on top of the yellow one? Is there a way I can use overflow or wordwrap? that will make this work?
  blue div to wrap once it butts up against yellow div
  
  .container {
    width:100%;
    border: px solid #d3d3d3;
  }
  
  .container div {}
  
  .wrap1 {
    display: table;
   border: 1px solid green;
    width: 100%;
  }
  
  .wrap2 {
    display: table;
    border: 1px solid red;
    width: 100%;
  }
  
  .title {border: 1px solid blue;
    display: table;
    float: left;
  }
  
  .container .learn {
    float: right;border: 1px solid yellow;
    cursor: pointer;
    display: table;
  }
  
  .container .content {
    display: table;
    display: none;
    padding: 5px;
  }
  <div class="container">
    <div class="wrap1">
      <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
      <div class="learn">Learn More!</div>
    </div>
    <!--makes the content expand below this div-->
    <div class="wrap2">
      <div class="content">
       <p> We use what is called a Comparative Rater. We simply input your information
  which then gets sent out to all the carriers and within a minute they return their
  prices. From there we choose the best one for you similar to shopping online for
  flights and hotels.</p>
      </div>
    </div>
    <!--holds the content below the wrap one div-->
  </div>
  <!--container-->
  
       
  
  A:
  
  Use flexbox!
  Add display: flex; to your containers. This will wrap your text once it reaches the other div. I've included a snippet example that should work for you.
  
  .container {
    width:100%;
    border: px solid #d3d3d3;
  }
  
  .container div {}
  
  .wrap1 {
    display: flex;
    justify-content: space-between;
   border: 1px solid green;
    width: 100%;
  }
  
  .wrap2 {
    display: table;
    border: 1px solid red;
    width: 100%;
  }
  
  .title {border: 1px solid blue;
    display: table;
    float: left;
  }
  
  .container .learn {
    float: right;border: 1px solid yellow;
    cursor: pointer;
    display: table;
  }
  
  .container .content {
    display: table;
    display: none;
    padding: 5px;
  }
  <div class="container">
    <div class="wrap1">
      <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
      <div class="learn">Learn More!</div>
    </div>
    <!--makes the content expand below this div-->
    <div class="wrap2">
      <div class="content">
       <p> We use what is called a Comparative Rater. We simply input your information
  which then gets sent out to all the carriers and within a minute they return their
  prices. From there we choose the best one for you similar to shopping online for
  flights and hotels.</p>
      </div>
    </div>
    <!--holds the content below the wrap one div-->
  </div>
  <!--container-->
  
  