Help with layout

https://jsfiddle.net/CodearELM/bx5tqod6/8/

Can I achieve the layout in the sandbox without using a padding element? You’ll see what I mean in the link.

I don’t see any padding on any of those elements? Perhaps I am missing something? I think you’ll need to be very specific about what you are trying to do.

The element with class “right” is the padding. It’s not “real” padding, it’s an element I’m using AS padding.

All I want is everything to look and behave (including the animation) identically as it is but without having to use that “right” element. I’ve tried many different things but I cannot get it to work unless I have that element to the side to keep the proportions right.

I’m sure you could probably figure it out if you really tried but I have to ask, why can’t you just use that extra div for the right side? Is there are particular technical reason or are you just morally opposed to it?

It’s just my style not to add extra elements if I can help it. I couldn’t find a solution so I asked here. Learning something new is never bad. It’s that simple, really. If there isn’t a CSS only solution, it’s not the end of the world.

There are several ways around the issue. Here is one:

<style>
body {
  margin: 0;
  background-color: black;
}

body, .container {
  height: 100vh;
}

.container {
  background-color: green;
  display: flex;
}
.center {
  width: 100%;
  max-width: 400px;
  background-color: lightskyblue;
}

.left_side {
  width: calc(50% - 200px);
  background-color: grey;
}

</style>
<section class="container">
   <div class="left_side">
      left
   </div>
   <div class="center">
      center
   </div>

</section>

alternatively, using flexbox and using the flex shorthand to set flex-shrink, flex-grow, and flex-basis.
or, using normal boxes, set .left_side to position: absolute, give it a responsive width, and set .center to position:relative and give it a responsive left the same size as the width of .left_side
or play around with float