How to display two elements on the same line?

Question

Here I want to display this slide show and the video inline. I\'ve tried thousand different examples but they couldn\'t solve my problem. Any helpful suggestion will be an i

Answer 1

Any time you want to put two elements on the same row, give their parent display: flex.

By default, the children of a flex container line up side by side. You can then use flex properties to control their size and positioning.

Alternatively, you can switch the display value of child elements to inline or inline-block.

Answer 2

Nowadays you can use flexboxes to put two elements side-by-side. CSS-tricks has a very thorough guide on the topic, so I won't bre you with the details.

In your particular case, use something like:

.slideshow {
  display: flex;
  justify-content: space-between;
  // no float and similar here
}

.slideshow > div {
  width: 50%;
}

You may need to prefix the flex and justify-content for better cross-browser support, and you may need to add flex: 1 for IE 10 support.

You could also clean the code up a little. You don't want to use whitespace around the = sign in the attributes, and you don't need to specify the style attribute multiple times. One is enough, with semicolon-separated rules.