title: How to create this type of layout without changing the header size
body: <p>I want to create this type of layout, here is the image.</p>
  
  <p><a href="https://i.stack.imgur.com/sQjaC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sQjaC.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What I tried-</strong></p>
  
  <p>here is my HTML code-</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row justify-content-center"&gt;
      &lt;div class="col-12 col-sm-10 col-md-8 col-lg-4"&gt;
        &lt;div class="custom-card give-space"&gt;
          &lt;div class="header"&gt;
            &lt;div class="logo"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;button id="load"&gt;More&lt;/button&gt;
          &lt;div class="my-div"&gt;
            Some text
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css code - </p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&amp;display=swap');
  html{
    height: 100%;
    padding: 0;
    margin: 0;
    min-height: 100%;
  }
  body{
    position: relative;
    padding-top: 30px;
    padding-bottom: 50px;
    background-color: #fff;
    min-height: 100%;
    font-family: 'Lato', sans-serif;
    color: #868686;
  
  }
  
  /* for custom card*/
  .custom-card{
    position: relative;
    background-color: #fff;
    min-height: 650px;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    overflow: hidden;
    padding-top: 250px; /* is this ok?*/
  }
  
  .custom-card .header{
    position: absolute;
    top: -30%;
    left: -35%;
    height: 55%;
    width: 170%;
    border-radius: 100%;
    background-color: #2e71ff;
  }
  
  .logo{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -68px;
    width: 20%;
    height: 40%;
    border-radius: 100%;
    background-color: #2e71ff;
    webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    border: 4px solid #ffffff;
  }
  
  @media (min-width: 1200px){
    .logo {
      bottom: -50px;
      width: 20%;
      height: 32%;
    }
  }
  @media (min-width: 992px) and (max-width: 1200px){
    .logo {
      bottom: -48px;
      width: 20%;
      height: 28%;
    }
  }
  @media (max-width: 768px){
    .logo {
      bottom: -55px;
      width: 20%;
      height: 40%;
    }
  }
  @media (max-width: 576px){
    .logo {
      bottom: -55px;
      width: 18%;
      height: 33%;
    }
  }
  
  .my-div{
    height: 1000px;
    background-color: #ff0000;
    display: none;
  }
  .show{
    display: block;
  }
  </code></pre>
  
  <p>Js code - </p>
  
  <pre><code>$('#load').click(function(){
      if($(".my-div").hasClass("show")){
      $(".my-div").removeClass("show");
    }else{
      $(".my-div").addClass("show");
    }
  });
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/ashisbiswas/rpjk3y46/" rel="nofollow noreferrer">jsfiddle</a> code</p>
  
  <p>But the problem is if I click on more button, it will show my-div element, which hight is 1000px (basically this is for example purpose, as my custom-card can increase its height) and the header height also increase and brake the layout. So my question is how to take care of the header section if custom-card increases its height? One more question, set padding-top: 250px; of custom-card is ok, because it can change its height and I want space between header and load more button( it ca be div element which contains some text). thanks</p>