JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>
  <span>Bienmiaou</span><br>
  <span>dans mon endroit merveilleux</span>
  </h1>
</header>

CSS

header h1 {
  font-size: 1rem; 
  margin: 0;
}
header h1 span:nth-of-type(1) {
  font-size: 2rem; 
}
header h1 span:nth-of-type(2) {
  font-size: 1.3rem; 
}

header {
  --smallpic: 65px;
  --picsize: calc(2 * var(--smallpic));
  --img: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Felis_silvestris_catus_-_Cat_02.jpg/319px-Felis_silvestris_catus_-_Cat_02.jpg);
  border-bottom: 3px solid #555;
  padding: 0 0 0 calc(var(--smallpic) + 1rem);
  background-repeat: no-repeat;
  background-size: var(--smallpic) var(--smallpic);
  background-image: var(--img);
  background-position: bottom left;
}
@media (min-width:30rem) {
  header {
    min-height: var(--picsize);
    text-align: center;
    align-content: center;
    padding: 0 calc(var(--picsize) + 1rem);
    background-image: var(--img), var(--img);
    background-size: var(--picsize) var(--picsize);
    background-position: top left, top right;
}