¿Cómo mostrar dos elementos en la misma línea?

Aquí quiero mostrar esta presentación y el video en línea. Probé mil ejemplos diferentes pero no pudieron resolver mi problema. Cualquier sugerencia útil será de gran ayuda ya que soy un principiante en el desarrollo web. ¡Gracias!

var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i  x.length) { myIndex = 1 } x[myIndex - 1].style.display = "block"; setTimeout(carousel, 4000); } 
 
canada myanmar china italy

Hoy en día puedes usar flexboxes para poner dos elementos uno al lado del otro. CSS-tricks tiene una guía muy completa sobre el tema, por lo que no te hablaré con los detalles.

En su caso particular, use algo como:

 .slideshow { display: flex; justify-content: space-between; // no float and similar here } .slideshow > div { width: 50%; } 

Es posible que deba agregar el prefijo flex y justify-content para un mejor soporte entre navegadores, y es posible que necesite agregar flex: 1 para el soporte de IE 10.

También podría limpiar el código un poco. No desea utilizar espacios en blanco alrededor del signo = en los atributos, y no necesita especificar el atributo de style varias veces. Una es suficiente, con reglas separadas por punto y coma.

Cada vez que desee colocar dos elementos en la misma fila, display: flex su display: flex principal display: flex .

De forma predeterminada, los elementos secundarios de un contenedor flexible se alinean uno al lado del otro. A continuación, puede usar las propiedades de flexión para controlar su tamaño y posición.

Alternativamente, puede cambiar el valor de display de elementos secundarios a en inline o inline-block .