Не могу сверстать 2 дива горизонтально, чтоб 2й был "резиновым"

Приветствую всех!
Уже битый день не могу сверстать, чтоб 2 дива были горизонтально, с некоторыми условиями. Может кто сможет помочь?

Приведенный html приведен просто для наглядности задачи. Переверстать можно и на дивах и на table и на ul - не принципильно. Лишь бы работало.
В реальной верстке марджин и цветных бордеров нет. Они в примере приведены просто для наглядности.

Итак условия:
- левый синий див не имеет фиксированной ширины/высоты, то есть из-за его содержимого он может менять как свою высоту так и ширину. Но они точно не больше 50% экрана.
- правый зеленый див должен занимать оставшуюся правую часть не вылезая за экран вправо.
- он же (правый зеленый див) не имеет фиксированной высоты, так как при длинном тексте должен быть перенос на новую строку и див будет увеличиваться в по высоте
- верхние грани синего и зеленого дива прижаты вверх к красному контейнеру
- высота красного контейнера должна быть максимальной из двух высот внутренних дивов
- (Самое сложное). Внутренний текст в правом зеленном диве потенциально может быть очень длинным и не иметь пробелов! ))

Хотелось бы решить это просто версткой, без JS.

Заранее благодарен!
<html>

<head>



<style>

    div {

      margin: 3px;

    }

    .red {

      border: 1px solid red;

      display: flex;

    }

    .blue {

      border: 1px solid blue;

    }

    .green {

      border: 1px solid green;

    }

</style>



</head>

<body>



<div class="red">

  <div class="blue">heregoestime<div>one more</div></div>

  <div class="green">heregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptionheregoestaskdescriptioeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregoeregoestaskdescriptionheregoestaskdescriptionheregon</div>

</div>



</body>

</html>