Two divs side by side, without container - css

Question

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?
.one,
.two {
float: left;
}
.one {
width: 66.66%;
}
.two {
width: 33.33%;
}
<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.
.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%;
}
<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>

Answer 1

You could use CSS calc() function along-with display:inline-block instead of float to align both divs responsively without making use of media query.
But as both divs are display as inline-block and when using inline-block it adds white-space around it's block, to remove that I have used font-size:0 in body tag, so on remaining block in your design you have to assign font-size manually or else text won't be visible.
body{
font-size:0;
margin:0;
}
.one{
display:inline-block;
background:pink;
width:calc(100vw - 40vw);
font-size:16px;
}
.two{
display:inline-block;
background:pink;
width:calc(100vw - 60vw);
font-size:16px;
}
<div class="cont">
<div class="one">content goes here</div>
<div class="two">content goes here</div>
</div>

Answer 2

Given the fact you already use Flexbox, I suggest you do it for this too, like this.
If you don't want the container, just drop its markup and move its CSS properties to the body
Fiddle demo
Stack snippet
.container {
display: flex; /* added */
flex-wrap: wrap; /* added */
}
.heading {
flex: 0 0 100%; /* added, behaves like a block */
text-align: center;
margin-bottom: 35px;
}
.section-one {
flex: 0 0 100%; /* added, behaves like a block */
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 {
flex: 1 0 66.666%; /* added, behaves like an inline-block but fill when on single line */
min-width: 400px;
text-transform: uppercase;
margin-top: 80px;
padding-right: 80px;
box-sizing: border-box; /* added, make padding be included in set width */
border: 1px dotted gray; /* demo purpose */
}
.section-right {
flex: 1 0 33.333%; /* added, behaves like an inline-block but fill when on single line */
min-width: 200px;
box-sizing: border-box; /* added, make border be included in set width */
border: 1px dotted gray; /* demo purpose */
}
<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>

Answer 3

I suggest you to use a media query anyway to make your divs on top of each other on small devices, especially if you have text content. The max-width I'm giving to you is just an example
#media screen and (max-width: 480px) {
.one,
.two {
float: none;
width: 100%;
}
}
I would gladly suggest you the flex-box property, but if you don't got a container and can't modify the HTML, this will be complicated.
Here's the link anyway : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
With flexbox, you just have to give the property to your container :
.container {
display: flex;
}
Then you can choose the way you want to sort your elements :
.container {
flex-direction: row;
}
Again this is an example, check the link i gave you for further informations.

Answer 4

You need to reset box-sizing to include padding and border into width calculation.
The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
A media query will help to pile them when boxes become too small.
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
example
.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; remove */
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
/* updates */
.section-left,
.section-right {
box-sizing:border-box;
}
#media all and (max-width : 599px) {
.section-left,
.section-right {
width:100%;
padding:1em;
}
}
/* let's see them */
div {
box-shadow:0 0 0 2px green;
}
<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>