JSFiddle - React, Tailwind, and code Playground

HTML

<!Doctype HTML>
<html lang = "pt-br">
<meta charset "UTF-8">
<head>
<title>Doc</title>
</head>
<body>
<center>
<div id="Tela">
    <div class="content">
        <div id="A"><img id="imgA" src="">aaa</div>
        <div id="B"><img id="imgB" src="">bbb</div>
    </div>
    <div class="Btn">
        <button type="button" id="btn" onclick="btn()" class="Botao">ccc</button>
    </div>
</div>
</center>
</body>
</html>

CSS

@charset "utf-8";
    .content {
      position: relative;
      width: 100%;
      margin-bottom: 10px;
    }
    div#A{
      width:auto;
      width: 100%;
      background-color: red;
      height: 200px;
    }
    div#B{
      position:absolute;
      left: calc(50% - 75px);
      width: 150px;
      top: 50%;
      vertical-align: middle;
      background-color: yellow;
      bottom: 0;
    }
    div#Tela{
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 60%;
        height:auto;
        text-align:center;
    }
    .Btn{
        position:static;
        width:100%;
        height:auto;
    }
    .Botao{
        width:100%;
        text-align: left;
        background:#09F;
        font-size: 18px;
        font-family:"Arial Black", Gadget, sans-serif;
    }