Set element width to sibling width

Question

I have a slightly unusual CSS issue to overcome.

I have an arrangement of two columns in which the width of the left column is set by the width of the main image, and on the right it is allowed to fill the remaining space. Under the main image is a container that can have a natural width larger than the main image. However, I want this div to be the same width as the main image, and the overflow will be hidden. Here are my efforts to try:

.outer {
  margin-right: 5px;
  position: relative;
}
.left {
  float: left;
}
.right {
  width: auto;
  overflow: hidden;
}
.contentOuter {
  overflow: hidden;
}
.content {
  width: 500px;
}
.inner {
  background-color: grey;
  color: white;
  width: 100%;
  height: 150px;
}

<div class="outer left">
  <div class="image">
    <img src="http://placehold.it/350x150" />
  </div>
  <div class="contentOuter">
    <div class="content">
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>
<div class="outer right">
  <div class="inner">
    Hello world!
  </div>
</div>

Run codeHide result

But, as you can see, it .contentOuterstretches to the width of its contents, no matter what I'm trying to do.

, , , , .content , - CSS; , .image img.

, , , max-width on .content:

.outer {
  margin-right: 5px;
  position: relative;
}
.left {
  float: left;
}
.right {
  width: auto;
  overflow: hidden;
}
.contentOuter {
  overflow: hidden;
}
.content {
  max-width: 350px; /* Hard-coded for demo purposes */
}
.inner {
  background-color: grey;
  color: white;
  width: 100%;
  height: 150px;
}

<div class="outer left">
  <div class="image">
    <img src="http://placehold.it/350x150" />
  </div>
  <div class="contentOuter">
    <div class="content">
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>
<div class="outer right">
  <div class="inner">
    Hello world!
  </div>
</div>

Hide result

Answer 1

jQuery. .

var imgWidth = $('.image').width();
$('.content').width(imgWidth);

Answer 2

, , , :

position: absolute;
width: 100%;

, , . overflow: hidden .

, ( ) .

jsFiddle: https://jsfiddle.net/jacquesc/rsz0hb1g/