JSFiddle - React, Tailwind, and code Playground

HTML

<main>
	<div id="main-box">
	    <section>
	        <header><h2>Заголовок раздела</h2></header>
	        <div class="content-box">
	            <article>
	                <figure>
		                <p class="img-box">{image}</p>
		            <figcaption>
			            <header><h3>Заголовок статьи</h3></header>
			            <p class="content-box">Содержание<p>
		            </figcaption>
	                </figure>
                </article>
	            <article>
	                <figure>
		                <p class="img-box">{image}</p>
		            <figcaption>
			            <header><h3>Заголовок статьи2</h3></header>
			            <p class="content-box">Содержание2<p>
		            </figcaption>
	                </figure>
                </article>
	        </div>
        </section>
	</div>
	<div id="side-box">Другие разделы</div>
</main>

CSS

main {
		text-align: center;
		border-radius: 1%;
		box-shadow: 0 0 5px 3px;
		background-color: #c0c0c0;
		margin-top: 3%;
		margin-bottom: 3%;
		padding: 1%;
	}
	#main-box {
		width: 60%;
		min-width: 300px;
		margin: 0 2% 2% 0;
		display: inline-block;
		vertical-align: top;
	/*	border: 2px solid red;	*/
	}
	#side-box {
		width: 30%;
		min-width: 150px;
		margin: 0 0 2% 0;
		display: inline-block;
		vertical-align: top;
	}
	section {
		width: 100%;
		border-radius: 3px 3px 3px 3px;
		box-shadow: inset 0 0 5px 3px white;
		background-color: white;
		padding: 1%;
		display: inline-block;
	}
	#main-box section {
		min-width: 150px;
	}
	#side-box section {
		min-width: 150px;
		margin: 0 0 30px 0;
	}
	article {
		background-color: #c0c0c0;
		text-align: left;
		overflow: hidden;
		padding: 5px;
		border-radius: 5px;
		margin: 2%;
		display: inline-block;
		vertical-align: top;
	}

	#main-box article  {
		width: 30%;
		min-width: 100px;
	}