JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap x1">

    <div class="opa ex1">
        <img src="app.svg">
        <span>App Store</span>
    </div>
    
    <p>Пример 1 блок тянется</p>
</div><div class="wrap x2">

    <div class="opa ex2">
        <img src="app.svg">
        <span>App Store</span>
    </div>
    
    <p>Пример 2 блок нетянется</p>
</div>

CSS

body{position: relative; top: 10px; margin: 0;}
p{margin: 10px 20px 0; font-size: 10pt; color: #4a2e03b5; text-align: center;}
.wrap {position: absolute; width: 100%; height: 200px;}
.wrap.x1{top: 0;}
.wrap.x2{top: 200px;}
/*---------------------------------------------------*/

.opa{
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 4px;
  border-radius: 3px;
  border: 3px solid #ff5050;
  text-align: center;
}
.ex1{width: 50%; }
.ex2{width: max-content;}
span{font-size: 16pt; color: #3d7692;}
@media all and (max-width: 320px){
  .ex2{width: min-content;}
}