javascript css flexbox styled-components

How to position div with text on an image and scale both

Trying to place a div with an image and text in between auto generated divs.

Codesandbox: https://codesandbox.io/s/html-css-fe1l6

My page structure:

    <div class=chapter>
      <div class=heading>Heading 1</div>
      <div class=bodyText>Chapter body 1. Chapter body 1. Chapter body 1. Chapter body 1. Chapter body 1. </div>
    </div>
    <div class=chapter>
      <div>Heading 2</div>
      <div class=bodyText>Chapter body 2. Chapter body 2. Chapter body 2. Chapter body 2. Chapter body 2.</div>
    </div>
    <div class=chapter>
      <div class=imageContainer>
        <img class=image src="..." ></img>
        <div class=imageQuote>"This is some quote. Lot of text is here" - Author</div>
      </div>
      <div>Heading 3</div>
    <div class=bodyText>Chapter body 3. Chapter body 3. Chapter body 3. Chapter body 3. Chapter body 3</div>
    </div>

CSS

.chapter{
  margin-bottom: 30px;
}
.heading {
  font-size: 14px;
}
.bodyText {
  font-size: 12px;
}
.imageContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
  flex: 0 0 auto;

}
.image {
  width: 25%;
  position: relative;
  z-index: 1;
  display: block;

}
.imageQoute {
  display: inline-block;
  height: 168px;
  width: 228px;
  height: auto;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: 10px;
  position: relative;
  z-index: 2;
  right: 15.5%;
  margin-top: 2%;
  overflow: hidden;
}

Problem: The imageQuote div should float on middle right hand side of the img with a specific width which should scale (When screen sizes increases or decreases the img and 'imageQuote' div should also increase or decrease) but the position of the 'imageQoute' div should always be same (on middle right of the img).

Question: How to position a div on top of an image and auto scale while not losing position.

Codesandbox: https://codesandbox.io/s/html-css-fe1l6

Solution

.larger-text {
  font-size: 32px;
}

.imageContainer {
  display: flex;
  align-items: center;
}

.imageContainer > * {
  flex-grow: 1;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Another simple example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class=chapter>
      <div class=heading>Heading 1</div>
      <div class=bodyText>Chapter body 1. Chapter body 1. Chapter body 1. Chapter body 1. Chapter body 1. </div>
    </div>
    <div class=chapter>
      <div>Heading 2</div>
      <div class=bodyText>Chapter body 2. Chapter body 2. Chapter body 2. Chapter body 2. Chapter body 2.</div>
    </div>
    <div class=chapter>
      <div class=imageContainer>
        <img class=image src="data:image/jpeg;base64,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" ></img>
        <div class=imageQuote>"This is some quote. Lot of text is here" - Author</div>
      </div>
      <div>Heading 3</div>
    <div class=bodyText>Chapter body 3. Chapter body 3. Chapter body 3. Chapter body 3. Chapter body 3</div>
    </div>
  </body>
</html>

Text is positioned on the middle right of the image, however i'm not sure what you meant for the image width. Hope this is what you needed.