100% height dependent on height of brother element

Question

I need the element cnt-right to be height 100% of its sibling.

It doesn't have a parent element, only siblings.

Is it possible to accomplish this with CSS? Or do I have to use javascript?

I have this estructure: jsFiddle

.column {
  display: block;
  min-height: 50px;
  background-color: #ccc;  
  text-align: center;
  float: left;
}

.decktop-12 {
  width: 100%;
}

.decktop-8 {
  width: 66%;
}

.decktop-4 {
  width: 33%;
}

.cnt {
  background-color: #995595;
}

.cnt-right {
  background-color: #559959;
}

<div class="mobile-12 decktop-12 cnt-top column">
  Content top
</div>
<div class="mobile-12 decktop-8 cnt column">
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
</div>
<div class="mobile-12 decktop-4 cnt-right column">
  Content - right
</div>
<div class="mobile-12 decktop-12 cnt-bottom column">
  Content bottom
</div>

Answer 1

You can use only CSS creating a grid layout, javascript is not necessary: https://css-tricks.com/snippets/css/complete-guide-grid/

This is an example of what you could do:

.grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "header header"
    "content right"
    "footer footer"
}

.header {
  grid-area: header;
  
}
.content {
  grid-area: content;
  background-color: #995595;
}
.right {
  grid-area: right;
  background-color: #559959;
}
.footer {
  grid-area: footer;
}

.header, .footer{
  min-height: 50px;
  background-color: #ccc; 
}

.grid > * {
  text-align: center;
}

<div class="grid">
	<div class="header">
	  Content top
	</div>
	<div class="content">
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	</div>
	<div class="right">
	  Content - right
	</div>
	<div class="footer">
	  Content bottom
	</div>
</div>