Jak zrobić jak na stronie poniżej

dwa divy obok siebie. po lewej tekst a po prawej zdjęcie
Jak zmniejszam okno przeglądarki to divy się pomniejszają a jak zwiększam okno przeglądarki to tekst i obraz się powiększa
Musi jeszcze działać przeskakiwanie kolumn jedną pod drugą jak juz osiągnie zbyt mały rozmiar
https://www.szymonolma.pl/fotoblog/

Zrobiłem jak poniżej ale nie do końca działa

[XML] pobierz, plaintext 
  1.  
  2. <html>
  3.  
  4. <head>
  5.  
  6.  
  7.  
  8. <style>
  9.  
  10.  
  11. .flex-container {
  12.  width: 85%;
  13.  
  14.  
  15.  background-color: gray;
  16.  
  17.  
  18. padding: 10px;
  19.  
  20.  
  21.  display: flex;
  22.  
  23.  
  24.  justify-content: center;
  25.  
  26.  
  27.  align-content: center;
  28.  
  29.  
  30.  margin-left: auto;
  31.  margin-right: auto;
  32.  
  33. //flex-basis: auto;
  34.  
  35.  
  36. //flex-wrap: wrap; 
  37. }
  38.  
  39.  
  40.  
  41. .flex-item1 {
  42.  
  43.  
  44.  background-color: red;
  45.  
  46.  
  47.  border: 1px black solid;
  48.  
  49. flex-basis: 85%;  
  50.  
  51. //flex-grow: 1;
  52.  
  53. text-align: center;
  54. }
  55.  
  56.  
  57.  
  58.  
  59. .flex-item2 {
  60.  
  61.  
  62.  
  63.  background-color: yellow;
  64.  
  65.  border: 1px black solid;
  66.  
  67.  
  68.  flex-basis: 40%; 
  69.  
  70.  
  71. } 
  72.  
  73.  
  74.  
  75. .flex-container {
  76.   flex-direction: column;
  77. }
  78. @media (min-width: 800px) {
  79.   .flex-container {
  80.     flex-direction: row;
  81.   }
  82. }
  83.  
  84.  
  85. @media (min-height: 1079px) {
  86.   .flex-container {
  87.     flex-wrap: wrap; 
  88.   }
  89. }
  90.  
  91. </style>
  92.  
  93.  
  94. </head>
  95.  
  96.  
  97. <body>
  98.  
  99.  
  100.  
  101. <br>
  102.  
  103.  
  104. <div class="flex-container">
  105.  
  106.  
  107.  
  108. <div class="flex-item1" style="min-width: 200px">
  109. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  110. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  111. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  112. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  113. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  114. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  115.   </div>
  116.  
  117.  
  118.  
  119.   <div class="flex-item1" style=" flex-basis:auto; min-width: 200px; flex-basis: 50%;">
  120.  
  121.  
  122. <img width="80%" src="https://cdn.pixabay.com/photo/2017/01/06/19/12/soap-bubble-1958648_960_720.jpg" border="0" style="margin:0 auto; display:block; padding: 5px 5px 5px 5px;">
  123.  
  124.  
  125. </div>
  126.  
  127.  
  128. </div>
  129.  
  130.  
  131. <!----contener end-----> 
  132.  
  133.  
  134.  
  135. </body>
  136.  
  137. </html>
  138.  
[XML] pobierz, plaintext