JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
	<div class="row">

		<div class="col col-lg-9 col-md-9 col-sm-9">
			
			<div class="content layout">
				
				Контент

				</div>

			</div>

			<div class="col col-lg-3 col-md-3 col-sm-3">
				
				<div class="user__profile  layout">
					<p>Профиль</p>
				</div>

				<div class="animals__categories layout">
					<p>Категории животных</p>
				</div>

				<div class="random__animal  layout">
					
					<div class="inline"><img src="img/random.png" alt="" width="50"></div>
					<p class="inline">Случайная статья</p>

				</div>
				

			</div>
			

		</div>
	</div>
  
  <div class="container">
	<div class="row no-gutters">

		<div class="col col-lg-9 col-md-9 col-sm-9">
			
			<div class="content layout relative">
				
				Контент

				</div>

			</div>

CSS

.layout {
  background-color: #eeeeee;
  border-radius: 3px;
}

.relative {
  position: relative;
  top: -95px;
}

.content {
  margin-top: 25px;
  min-height: 700px;
}

.user__profile {
  margin-top: 25px;
  height: 300px;
  background-color: #eeeeee;
}

.animals__categories {
  margin-top: 25px;
  height: 370px;
  background-color: #eeeeee;
}

.random__animal {
  padding-top: 10px;
  text-align: center;
  margin-top: 25px;
  height: 70px;
}