I have to inline two divs side by side. The thing is, I can't edit HTML and they don't have a container. To make things even more complicated, the first div needs to be wider than the second one. And I have no idea how to do this **and** make it responsive. 

This is what I have so far. But it's not responsive. To make it so, I'd have to edit it with @media and I'm really trying to avoid that. Is there a way I could make this cleaner? A way I could use flex maybe, without a container? And make it responsive too, without having it meshed together on smaller devices?

```css
.one,
.two {
  float: left;
}

.one {
  width: 66.66%;
}

.two {
  width: 33.33%;
}
```

```html
<div class="one">content goes here</div>
<div class="two">content goes here</div>
```

**EDIT:** This is what the outline of my code looks like, with a container. Just to get you guys more information about the issue. Div with a class section-one has 5 items inside, and they need to stay inlined and responsive when the window is resized, so I don't want to mess up the code I currently have because it behaves well on smaller screens.

```css
.container {}

.heading {
  text-align: center;
  margin-bottom: 35px;
}

.section-one {
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
}

.item {
  position: relative;
  flex-shrink: 0;
  margin: 0 auto;
  margin-bottom: 15px;
}

.section-left {
  float: left;
  text-transform: uppercase;
  width: 66.66%;
  margin-top: 80px;
  padding-right: 80px;
}

.section-right {
  float: left;
  width: 33.33%;
}
```

```html
<div class="container">
  <div class="heading">
    <h2>Lorem ipsum dolor</h2>
    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
  </div>
  <!--- /.heading -->
  <div class="section-one">
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
  </div>
  <!--- /.section-one -->
  <div class="section-left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
  </div>
  <!--- /.section-left -->
  <div class="section-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
  </div>
  <!--- /.section-right -->
</div>
```