How to align to elements side by side?

Question

I have a video and a css animation, I want the video to be centred and the animation to the left. I tried floating them but this left a big gap in between them. - codepen - https://codepen.io/MarkHarrison/pen/xpZLLy

iframe{
    border: 10px solid transparent;
    border-image-source: url(https://i.imgur.com/91tJ1qi.png);
    border-image-slice: 10;
    width: 500px;
    height: 300px;
    display: block;
    margin: auto;
}

.box {
    position: relative;
    margin: 0px;
    display: block;
    width: 600px;
    height: 420px;
    margin-top: 15%;
}

Is this the final effect you want? https://codepen.io/sol_b/pen/ppgLXE — sol, Dec 18 '17 at 14:59
Can you add a [mcve] (in form of a Stack Snippet) directly to your question? Cheers! — domsson, Dec 18 '17 at 14:59

score 0 · Answer 1 · answered Dec 18 '17 at 15:01

add "position: relative" to the .wrapper // don't 2. remove % margin-top from .box
add magic css to .box

position: absolute; top: 0; left: calc(50% - 520px); transform: translateX(-50%);

// dont' 4. adjust top with em/px so that the image fits vertically use transform: translateY() for that instead

How to align to elements side by side?

1 Answers1