Адаптивное выравнивание по вертикали Float Right Image и текст

Question

Я очень новичок в этом

Я пытаюсь создать текст рядом с плавающим правым изображением с адаптивным цветом фона. Этот раздел будет показан как часть статьи, но стилизация будет применяться только к этому разделу.

Код ниже, похоже, работает, но я бы хотел, чтобы текст был выровнен по вертикали с изображением. Так что текст отображается в середине изображения.

Кажется, я не могу этого достичь

Я определил <img style="float: right; vertical-align: middle;">

Изображение предоставленного кода

вот код (https://codepen.io/Masseve/pen/LMoMyW/)

<div id="blogcontent">   
<img style="float: right; vertical-align: middle;" src="https://image.shutterstock.com/z/stock-photo-city-interchange-closeup-at-night-beautiful-transport-infrastructure-background-267836915.jpg" width="700"/> 
<div id="textcontent">
<H1> A Title </h1>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>                                                                                                                              
</div>
</div>                                                                                                                               

#blogcontent {
border-radius: 4px;
background-color: #ebe9e5;
display: inline-table;
}

#textcontent {
Padding: 20px
}

Answer 1

Вот небольшой пример: D

.wrapper {
  display: flex;  
  flex-flow: row wrap;
}

.main {
  text-align: left;
  background: deepskyblue;
  flex:1.5
}


.aside-1 {
  background: purple;
   flex:1
}
.image{
  width:100%;
  height:100%;
  background-image:url('https://image.shutterstock.com/z/stock-photo-city-interchange-closeup-at-night-beautiful-transport-infrastructure-background-267836915.jpg');
  background-size:cover;
}

@media all and (min-width: 600px) {
      .aside { flex: 1; }
    }

/*@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .main    { order: 1; }
  .aside-1 { order: 2; } 
 
}*/

<div class="wrapper">
  <article class="main">
   <h1> A Title </h1>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>                                                  
                    <br>
                                        <br>
  </article>
  <aside class="aside aside-1">
  <div class="image"></div>
  </aside>
</div>