Фраза «image left rext right codepen» представляет собой комбинацию английских слов и, возможно, слов с ошибками или неясных слов. Судя по контексту, я предполагаю, что вы имеете в виду дизайн макета, в котором изображение расположено слева, текст — справа, а CodePen является платформой для отображения и обмена фрагментами кода. Вот несколько методов, которые можно использовать для достижения такого макета:

1. HTML и CSS. Вы можете создать макет с помощью HTML и CSS. Вы можете использовать элемент-контейнер для хранения изображения и текста, а затем использовать CSS для их соответствующего размещения. Например:

<div class="container">
  <img src="image.jpg" alt="Image" class="image">
  <p class="text">Text goes here</p>
</div>

.container {
  display: flex;
  align-items: center;
}
.image {
  width: 50%; /* Adjust the width as needed */
}
.text {
  width: 50%; /* Adjust the width as needed */
}

2. CSS Grid: CSS Grid — еще один мощный метод создания сложных макетов. Вы можете определить контейнер сетки и поместить изображение и текст в нужные области сетки. Например:

<div class="container">
  <img src="image.jpg" alt="Image" class="image">
  <p class="text">Text goes here</p>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the column widths as needed */
  grid-gap: 20px; /* Adjust the gap size as needed */
}
.image {
  grid-area: 1 / 1 / 2 / 2;
}
.text {
  grid-area: 1 / 2 / 2 / 3;
}

3. Фреймворки. Если вы используете интерфейсную среду, такую ​​как Bootstrap, существуют предопределенные классы и компоненты, которые помогут вам легко добиться желаемого макета. Вы можете использовать сеточную систему или утилиты flexbox, предоставляемые платформой.

4. Онлайн-редакторы кода. Такие платформы, как CodePen, как вы упомянули, позволяют создавать и публиковать фрагменты кода HTML, CSS и JavaScript. Вы можете использовать CodePen, чтобы создать перо и написать необходимый код для достижения желаемого макета изображения и текста.