Esto debería funcionar.

Los elementos div son elementos de bloque, por lo que siempre intentarán llenar todo el espacio horizontal si las propiedades de visualización o ancho no se cambian o el elemento principal anula ese comportamiento (por ejemplo, usando FlexBox)

HTML

 <div className="RoundBox"> <div className="DashImages"><img src={PDF} alt="PDF" /></div> <div className="IconText">PDF File</div> </div>

CSS

 img { width: 3vw; height: 3vw; margin-left: 1vw; } .IconText { padding-left: 10px } .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; display: flex; align-items: center; }

Su html no es válido con la etiqueta de imagen y le falta un div. Querrías arreglar eso primero.

 <div className="DashImages"><img src={PDF} alt="PDF" /></div>

Entonces tienes un par de opciones. Aquí hay dos ejemplos:

1. Simplemente puede agregar float: left al img css. Podría recomendar usar una clase en lugar de un selector que apunte a todas las etiquetas img . Ejemplo

 img { width: 3vw; height: 3vw; margin-left: 1vw; float: left; }

2. También puede explorar usando flexbox agregando display: flex; a su clase .RoundBox . Tenga en cuenta que hay diferentes atributos de alineación que puede usar para colocar elementos usando flex.

 .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; display: flex; }