JSFiddle - React, Tailwind, and code Playground

HTML

Situation:
<div class="screen-1">
  <div class="div-1">logo</div>
  <div class="div-2">text</div>
</div>

<br>

Wanted:
<div class="screen-1">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 500px">text</div>
</div>
Text in the middle of screen
<br><br>
Also when screen to small, I want this:
<div class="screen-1" style="width: 150px">
  <div class="div-1">logo</div>
  <div class="div-2"  style="width: 50px">text</div>
</div>

<br><br>
Info:<br> 
I dont want to use position absolute. The divs have to by dynamic. "text" is never allowed to leave div2.

CSS

.screen-1 {
  width: 500px;
  display: flex;
}

.div-1 {
  background-color: green;
  width: 100px;
}
.div-2 {
  background-color: red;
  width: 400px;
  text-align: center;
}