title: Bootstrap4: Placing Cards side by side?
body: <p>So I am using bootstrap4. I'm trying to place one card on the left of two other cards that are stacked on top of each other, with the left most card having a set length of the total length of the other two cards....But I can't figure out how to do this.</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-html lang-html prettyprint-override"><code>&lt;div class="card w-20"&gt;
      &lt;blockquote class="blockquote card-body"&gt;
          &lt;p&gt;This card on the left of the other two cards, with a fixed height and scrolling.&lt;/p&gt;
          &lt;footer class="blockquote-footer"&gt;
              &lt;small class="text-muted"&gt;
                  Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;
              &lt;/small&gt;
          &lt;/footer&gt;
      &lt;/blockquote&gt;
  &lt;/div&gt;
  &lt;div class="card w-75"&gt;
      &lt;div class="card-body"&gt;
          &lt;h5 class="card-title"&gt;How do you want to ask the question?&lt;/h5&gt;
          &lt;p class="card-text"&gt;Enter the information below.&lt;/p&gt;
          &lt;div class="input-group"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Description&lt;/span&gt;
              &lt;/div&gt;
              &lt;textarea class="form-control" aria-label="With textarea"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Supplemental Methods&lt;/span&gt;
              &lt;/div&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Text&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Audio&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Video&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Image&lt;/button&gt;       
          &lt;/div&gt;
          &lt;button type="button" class="btn btn-outline-dark m-3 float-right"&gt;Next&lt;/button&gt;       
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="card w-75"&gt;
      &lt;div class="card-body"&gt;
          &lt;h5 class="card-title"&gt;How should students ask the question?&lt;/h5&gt;
          &lt;p class="card-text"&gt;Enter the information below.&lt;/p&gt;
          &lt;div class="input-group text-center"&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Audio&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Video&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Short Answer&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Sorting&lt;/button&gt;       
          &lt;/div&gt;
          &lt;div class="input-group mx-auto"&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;T/F&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Matching&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Label&lt;/button&gt;
              &lt;button type="button" class="btn btn-outline-dark m-3"&gt;Multiple Choice&lt;/button&gt;       
          &lt;/div&gt;
          &lt;button type="button" class="btn btn-outline-dark m-3 float-right"&gt;Next&lt;/button&gt;     
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>