How to handle a marquee tag with long text and image inside without text wrapping to second line?

I have a for loop which loops over the data - creates a div of logo and text and attaches to the marquee tag. I want this series of data in the marquee tag without wrapping to the next line.

Here is the code I have tried:

.commentary {
  font-family:Roboto-Regular;
  font-size:15px;
  color:#101010;
float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

marquee img {
    margin-left:3%;
    margin-right:3%;
    float:left;
    white-space:nowrap;
}

<marquee scrollamount="30" behavior="scroll" direction="left" style="background-color:#FEC33B">

  <div style="padding-top:10px;">
    <div style="white-space:nowrap;" *ngFor = "let text of data">
      <img  src="../assets/image-logo.svg"/>
      <p class="commentary">{{text}}<span> </span></p>

    </div>
  </div>

</marquee>

It works as expected if the text and the image fit within the screen size (that is, the image and the text are next to each other). If the text is too long then it wraps to the next line.

How do I stop the wrapping to the next line?

Solution

The problem here is that you are over the 100% of the div then you can expand the width to 200% or 300%

.commentary {
  font-family:Roboto-Regular;
  font-size:15px;
  color:#101010;
float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

marquee img {
    margin-left:3%;
    margin-right:3%;
    float:left;
    white-space:nowrap;
}

<marquee scrollamount="30" behavior="scroll" direction="left" style="background-color:#FEC33B">

  <div style="padding-top:10px;">
    <div style="white-space:nowrap; width:300%" *ngFor = "let text of data">
      <img style="display: inline-block"  src="../assets/image-logo.svg"/>
     <span class="commentary">sdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

    </div>
  </div>

</marquee>