apply css styles to make the text fully visible

Question

Is it possible to apply css styles to the inner class in this case so that the text is fully displayed (inner div is wider than it's parent).

HTML:

<div class="main">
  <div>
    1111111
  </div>
  <div class="inner">
    dds adg asdg asdg
  </div>
  <div>
    22222
  </div>
</div>

CSS:

.main {
  border:1px solid red;
  width: 50px;
  overflow: hidden;
}
.inner{
  height: 40px;
  border:2px solid green;
  margin-right: -10px;
}

jsFiddle

So, any changes for .inner (height: 40px should NOT be changed) so that the text is fully displayed in two lines by making that div a bit wider to the right?

Changing the html structure or CSS styles for main class are not allowed.

Unfortunately, scroll is not allowed. Everything should look the same, but the inner div display text in two lines (inner div to look wider).

Answer 1

Sorry if this doesn't comply with all your requirements but it's as far as I got bearing the example you shared, hope it helps.

.relative-wrap {
    position: relative;
}
.main {
  border:1px solid red;
  width: 50px;
  overflow: hidden;
  height: 80px;
}
.inner{
  height: 40px;
  border:2px solid green;
  margin-right: -50px;
  position: absolute;
  width: 100px;
  background: white;
}
.textdown {
  line-height: 110px;
}

<div class="relative-wrap">
  <div class="main">
    <div>
      1111111
    </div>
    <div class="inner">
      dds adg asdg asdg
    </div>
    <div class="textdown">
      22222
    </div>
  </div>
</div>