title: Padding to contain text in a wrapper
body: <p>I want the text to have a padding of 30px around the card-content container, however, currently the subtitle text overflows.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
    background-color: transparent;
    margin: 0;
    border: 1px solid rgb(180, 191, 200);
    border-top: none;
  }
  
  .card-img-left {
    height: 40%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('./../img/card-left.png');
  }
  
  .card-content {
    height: 60%;
    width: 100%;
  }
  
  .card-text {
    height: calc(100% / 3 * 2);
    width: 100%;
    padding: 1.5rem 2.5rem 2.5rem;
    text-align: left;
  }
  
  .card-title {
    font-size: 2rem;
    color: rgb(3, 16, 34);
    font-family: nbold;
  }
  
  .card-subtitle {
    margin-top: 1em;
    font-size: 15px;
    color: rgb(59, 66, 77);
  }
  
  .card-btn {
    height: calc(100% / 3);
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    &lt;div class="card-img-left"&gt;&lt;/div&gt;
    &lt;div class="card-content"&gt;
      &lt;div class="card-text"&gt;
        &lt;div class="card-title"&gt;Free valuation&lt;/div&gt;
        &lt;div class="card-subtitle"&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
          ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-btn"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It looks like this:</p>
  <p>[![Screenshot][1]][1]</p>
  <p>How do I fix this?
  [1]: <a href="https://i.stack.imgur.com/R440Y.png" rel="nofollow noreferrer">https://i.stack.imgur.com/R440Y.png</a></p>