La más "simple" es usar una `table`, así por ejemplo: - Al `div` lo indicamos que cuando contenido no entre, se oculte (`overflow: hidden`) - Agregamos una `table` la cual va a ocupar el 100% del ancho del `div` y como mínimo va a medir `1024px`. Esta tabla va a tener una fila con 2 celdas - La celda de la izquierda va a tener la "X" - La celda de la derecha va a tener la "estrella" alineada a la derecha ### Ejemplo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .header { overflow: hidden; border: 1px solid green; background: linear-gradient(to bottom, #004AB1, #5DADE2); height: 100px !important; padding-left: 20px; margin: 20px; vertical-align: middle; box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .1); border-radius: 10px; } .header table { width: 100%; /* Punto de quiebre */ min-width: 1024px; } img { border: 1px solid red; } .text-right { text-align: right; } <!-- language: lang-html --> <div class="header"> <table class=""> <tr> <td> <img src="https://previews.123rf.com/images/blankstock/blankstock1902/blankstock190200727/125609735-eliminar-icono-quitar-letrero-s%C3%ADmbolo-cancelar-o-cerrar-elemento-de-dise%C3%B1o-de-calidad-icono-de-estil.jpg?fj=1" width="100" alt="logo_Cultura"></td> <td class="text-right"><img src="https://previews.123rf.com/images/frizio/frizio1512/frizio151200007/49579125-%C3%A9toile-d-or-com%C3%A8te-symbole-de-no%C3%ABl.jpg?fj=1" width="900" height="81" alt="logo_Provident"></td> </tr> </table> </div> <!-- end snippet --> **PD:** Podemos reemplazar la `table` con una estructura `flexbox` o `grid layout`. Si te interesa, dejamelo saber en los comentarios.