Normalmente sou muito bom em CSS, mas não consigo descobrir como fazer esse layout específico.

Eu tenho um contêiner com uma largura máxima de 1.400 pixels. As margens esquerda e direita estão definidas comoauto portanto, quando a janela de exibição estiver acima de 1.400 pixels, o contêiner será centralizado.

Em seguida, tenho uma imagem fora do contêiner com uma div ao lado, a imagem ocupando 40% da janela de visualização, a div ocupando os 60% restantes da janela de visualização.

O que eu quero é uma div dentro da parte de 60%, que não ultrapasse a borda direita do contêiner de 1.400 pixels acima.

Um diagrama pode tornar as coisas mais claras:

Meu CSS até agora:

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

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

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

div.inner {
  ???
}

Paradiv.inner Eu tentei variações de porcentagens ecalc mas sem sucesso. Para esclarecimento, tudo no layout está bem, exceto a caixa rosa, que não consigo alinhar com a borda direita da caixa vermelha.