Keep Relatively Positioned Child Within Parent Block Max-top Equivalent Needed

There is a html code https://jsfiddle.net/1t68bfex/ The problem here is the third-party-block is dynamic and if it is not displayed, the button should stay near the top. The top

Solution 1:

You can consider the use of flexbox to achieve this:

.container {
  border: 1px solid red;
  display: flex;
}

button {
  margin-top:10px;
  align-self:flex-end;
}
.button {
  order: 1;
  max-height:100px;
  display:flex;
}

<divclass="container"><divclass="button"><button>
   The text from the left is beautiful
  </button></div><divclass="third-party-block"><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p></div></div><divclass="container"><divclass="button"><button>
   The text from the left is beautiful
  </button></div><divclass="third-party-block"><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p><p>
      some text comes here
    </p></div></div><divclass="container"><divclass="button"><button>
   The text from the left is beautiful
  </button></div><divclass="third-party-block"><p>
      some text comes here
    </p><p>
      some text comes here
    </p></div></div><divclass="container"><divclass="button"><button>
   The text from the left is beautiful
  </button></div><divclass="third-party-block"><p>
      some text comes here
    </p></div></div>