Content full width, only after fixed height sidebar - html

Question

I'm trying to achieve a layout similar to this:
Where:
Each content block has multiple elements inside of it
Content blocks and sidebar height is variable
Not using javascript
The closest I've got is this (but notice how the articles before the sidebar ends occupy much more space than desired, and buttons in the 3rd article occupy 100% of the page while the rest of the article's content occupy less):
.page {
width: 1000px;
margin: auto;
}
.sidebar {
float: right;
width: 300px;
height: 410px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
margin-bottom: 20px;
h3 { margin: 0; }
}
.buttons {
display: flex;
justify-content: space-between;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>
Please let me know if I'm not being clear.

Answer 1

You need to define width for first 3 article divs.
.page {
width: 1000px;
margin: auto;
}
.sidebar {
float: right;
width: 300px;
height: 527px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
margin-bottom: 20px;
h3 { margin: 0; }
}
.buttons {
display: flex;
justify-content: space-between;
}
.small-box-content{
width: 67%;
display: inline-block;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>

Answer 2

please let me know this is what you want Just added new div class for three article .side_left
.page {
width: 1000px;
margin: auto;
}
.side_left{
width:650px;
}
.sidebar {
float: right;
width: 300px;
height: 420px;
margin-top:20px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
width:100%;
margin-bottom: 20px;
}
h3 { margin: 0; }
.buttons {
display: flex;
justify-content: space-between;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<div class="side_left">
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>