Normalmente soy bastante bueno en CSS pero no puedo entender cómo hacer este diseño en particular.

Tengo un contenedor con un ancho máximo de 1.400 píxeles. Los márgenes izquierdo y derecho se establecen enauto entonces, cuando la ventana gráfica está por encima de 1.400 píxeles, el contenedor está centralizado.

uego tengo una imagen fuera del contenedor con un div al lado, la imagen ocupa el 40% de la ventana gráfica, el div ocupa el 60% restante de la ventana gráfica.

Lo que quiero es un div dentro de la porción del 60%, que no va más allá del borde derecho del contenedor de 1.400 píxeles de arriba.

Un diagrama puede aclarar las cosas:

Mi CSS hasta ahora:

div.container {
  max-width: 1400px;
  margin: 0 auto;
}

img {
  display: inline-block;
  width: 40%;
}

div.right {
  display: inline-block;
  width: 60%;
}

div.inner {
  ???
}

Pordiv.inner He intentado variaciones de porcentajes ycalc pero fue en vano. Para aclarar, todo en el diseño está bien, excepto el cuadro rosa que no puedo alinear con el borde derecho del cuadro rojo.