HTML: iframe and paragraph on the same line

Question

I want to have an iframe and a paragraph on the same line in a div on my HTML page. This should create a preview of the page and a description next to it.

<div class="element">
    <div class="preview">
        <iframe width="640px" height="360px" src="http://example.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
    </div>
    <div class="description">
        <h4>Header</h4>
        <p>Paragraph</p>
    </div>
</div>

The outcome should look like this:

Answer 1

Dont use inline, inline-block or float for styling purpose unless you stylign an e-mail template!

The appropiate tool in this case would be flexbox or css-grid. A simple setup such as this can be done easily with flexbox.

1. Remove the inline-style from the iframe.

2. apply flexbox to the container: .element { display: flex; }

3. apply a width to the .preview and .description that together equals 100%: .element > div { width: 50%; }

4. add element * { box-sizing-border-box; } to prevent possible overflow issues caused by borders and margins.

5. add position: relative; to the .preview

6. add position: absolute; top: 0; left: 0; width: 100%; height: 100%; to the iframe so that the iframe fills the entire containers height and width.

.element {
  display: flex;
}

.element > div {
  width: 50%;
}

.element * {
  box-sizing: border-box;
}

.preview {
  position: relative;
}

.preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* for demonstration purpose only */
.element > div {
  margin: 0;
  border: 1px solid red;
}

<div class="element">
  <div class="preview">
    <iframe src="http://example.com"></iframe>
  </div>
  <div class="description">
    <h4>Header</h4>
    <p>Paragraph</p>
  </div>
</div>