javascript - 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 immense help as i'm a beginner to web developing. Thank You!

var myIndex = 0;

carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  myIndex++;

  if (myIndex > x.length) {
    myIndex = 1
  }

  x[myIndex - 1].style.display = "block";

  setTimeout(carousel, 4000);
}

<div class="slideshow" style="max-width: 600px" style="display: inline" style="float: right">

  <div>
    <img class="mySlides" src="canada.jpg" style="width: 100%" alt="canada">
    <img class="mySlides" src="myanmar.jpg" style="width: 100%" alt="myanmar">
    <img class="mySlides" src="china.jpg" style="width: 100%" alt="china">
    <img class="mySlides" src="italy.jpg" style="width: 100%" alt="italy">
  </div>

  <div>
    <video width="400" controls style="float: right" style="display: inline" poster="http://via.placeholder.com/320x280?text=video">
<source src="Intro.mp4" type = "video/mp4">
</video>
  </div>

</div>

Answer 1

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.