Responsive Card Layout CSS Design not Fixed
<p>I want to make cards which are responsive but not fixed. What changes should I make to CSS so that it change change their sizes accordingly.</p>

<p>Here is the fiddle link for this <a href="https://jsfiddle.net/hawkeye15/u1j9tpx9/2/" rel="nofollow">Working Fiddle</a></p>

<p>The cars should change its size with resizing window however the position of the button should be at the bottom only, and in spite of content, size of all cards should be same.</p>

<p><strong>CARD.HTML</strong></p>

<pre><code>           &lt;div class = 'col-md-2'&gt;
      &lt;div class="mycard text-center"&gt; 
      &lt;div class="card-header"&gt; 
      &lt;p1&gt;HEADING 1&lt;/p1&gt; 
      &lt;/div&gt; 
      &lt;div class = "card-block"&gt;   
      &lt;div id = "container"&gt; 
      Something will be written here
      &lt;/div&gt;  
      &lt;/div&gt; 
      &lt;div class = "card-name"&gt; 
      &lt;p2&gt; MY NAME 1 &lt;/p2&gt; 
      &lt;/div&gt; 
      &lt;div class = 'cardfooter'&gt; 
      &lt;div class='dropdownAD'&gt;
      &lt;button class='dropbtnAD' onclick="AddIt()"&gt;Add Courses&lt;/button&gt;
      &lt;/div&gt; 
      &lt;div class='dropdownGR'&gt;&lt;button class='dropbtnGR'&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
      &lt;/div&gt; 

      &lt;div class="mycard text-center"&gt; 
      &lt;div class="card-header"&gt; 
      &lt;p1&gt;HEADING 2&lt;/p1&gt; 
      &lt;/div&gt; 
      &lt;div class = "card-block"&gt;   
      &lt;div id = "container"&gt; 
      Something will be written here
      &lt;/div&gt;  
      &lt;/div&gt; 
      &lt;div class = "card-name"&gt; 
      &lt;p2&gt; MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE &lt;/p2&gt; 
      &lt;/div&gt; 
      &lt;div class = 'cardfooter'&gt; 
      &lt;div class='dropdownAD'&gt;
      &lt;button class='dropbtnAD' onclick="AddIt()"&gt;Add Courses&lt;/button&gt;
      &lt;/div&gt; 
      &lt;div class='dropdownGR'&gt;&lt;button class='dropbtnGR'&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
      &lt;/div&gt; 

      &lt;div class="mycard text-center"&gt; 
      &lt;div class="card-header"&gt; 
      &lt;p1&gt;HEADING 3&lt;/p1&gt; 
      &lt;/div&gt; 
      &lt;div class = "card-block"&gt;   
      &lt;div id = "container"&gt; 
      Something will be written here
      &lt;/div&gt;  
      &lt;/div&gt; 
      &lt;div class = "card-name"&gt; 
      &lt;p2&gt; MY NAME 3&lt;/p2&gt; 
      &lt;/div&gt; 
      &lt;div class = 'cardfooter'&gt; 
      &lt;div class='dropdownAD'&gt;
      &lt;button class='dropbtnAD' onclick="AddIt()"&gt;Add Courses&lt;/button&gt;
      &lt;/div&gt; 
      &lt;div class='dropdownGR'&gt;&lt;button class='dropbtnGR'&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
      &lt;/div&gt; 

      &lt;div class="mycard text-center"&gt; 
      &lt;div class="card-header"&gt; 
      &lt;p1&gt;HEADING 4&lt;/p1&gt; 
      &lt;/div&gt; 
      &lt;div class = "card-block"&gt;   
      &lt;div id = "container"&gt; 
      Something will be written here
      &lt;/div&gt;  
      &lt;/div&gt; 
      &lt;div class = "card-name"&gt; 
      &lt;p2&gt; MY NAME 4&lt;/p2&gt; 
      &lt;/div&gt; 
      &lt;div class = 'cardfooter'&gt; 
      &lt;div class='dropdownAD'&gt;
      &lt;button class='dropbtnAD' onclick="AddIt()"&gt;Add Courses&lt;/button&gt;
      &lt;/div&gt; 
      &lt;div class='dropdownGR'&gt;&lt;button class='dropbtnGR'&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;/div&gt; 
</code></pre>

<p><strong>CARD.CSS</strong></p>

<pre><code>      .mycard {
      background-color: #FFC20A;
      color: black;
      margin-bottom: 10px;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      padding: 5px 5px 5px 5px;
      text-align: center;
      height: 200px;
      width: 230px;
      border-radius: 10px;
      font-size: 12px;
      }


      .card-header {
      color: black;
      height:24px;
      padding: 1px 0px 1px 0px;
      font-size: 16px;
      text-align: center;

      }

      .card-block {
      background-color: #b2b2b2;
      color: black;
      border-radius: 10px;
      height: 100px;
      width: 220px;
      }

      .card-name {
        height:35px;
      }

      .cardfooter {
      border-radius: 5px;
      width:100%;
      height: 34px;
      bottom:0;
      margin-bottom: 0px;
      }
</code></pre>