Изображение и текст в той же строке

Question

Я пытаюсь использовать codepen для размещения изображения в правой части экрана с некоторым текстом на левой стороне на той же высоте. Первоначально я использовал контейнер для конвертации, чтобы поместить их в слоты, но мне сказали, что это вызвало смешение кода, когда я связал его с помощью freecodecamp. Я также пробовал плавать изображение, но он, похоже, ничего не делает.

Это мой HTML:

<div style="background-color:#999; overflow:hidden;" class="well"> 
<div class="container-fluid"> 
<h1 class=" text-align-vertically text-center white-text"> <br> <br> <br> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture. <br> <br> <br> <br> </h1> 
<h1 class="text-center white-text"> Web Developer -  User Experience Designer - Graphic Artist <br> <br> <br> <br> <br> </h1> 

<img class="smaller-image1 image-margins circular-image resize-image" src="https://lh4.googleusercontent.com/-b5YzMfLsjTY/AAAAAAAAAAI/AAAAAAAAADw/QrZ6m4H7wkA/photo.jpg" alt="my photo"> 
    </div> 

и это мой CSS:

smaller-image1 { 
    width: 300px; 
    height: 300px; 
} 

.image-margins { 
    float: right; 
    width: 300px; 
    margin: 0 0 15px 20px; 
    padding: 15px; 
    border: 1px solid black; 
    text-align: center; 
} 

.circular-image { 
    border-radius: 50%; 
} 

.resize-image { 
    width: 100%; 
    height: 100%; 
} 

Answer 1

вам нужно избавиться от

.resize-image { 
width: 100%; 
height: 100%; 
} 

, потому что это делает изображение принять все доступной области и не оставлять места для текста в той же строке. вам также нужно поместить изображение перед текстом в свой html-файл.

live example