prompt react

PHOTO EMBED

Thu Jun 01 2023 08:49:27 GMT+0000 (Coordinated Universal Time)

Saved by @JISSMONJOSE #react.js #css #javascript

"""
<div className="file-list-item" key={index}>

  			<div className="file-info">
                <div
                  className="file-icon"
                >
                  <img src={FileListIcon} alt="File List Icon" />
                </div>
                <div className="file-name">
                  {file.name}
                </div>
              </div>

              <div className="close-icon" onClick={() => removeFile(file)}>
                <span>Remove</span>
              </div>
            </div>
"""

Suggest you are a experienced react developer.

`file-list-item` div element contains two child div elements `file-info` element and `close-icon` div element. These two chilf elements should have space between them. You can apply flex properties if needed. Write the styling from scratch. background color and border radius of parent element is 
#E4FDFF and 30px. Also please explain the change you make. file-icon and file-name should have margin of 10px in between. equal padding around file-list-item div element.  Return the updated version of code ans styles.



You are CSS expert.
help me to resolve this design issue.
currently width of file-list-item is changing based on length of file name. I want the width to stay consistent irrespective of file we attach. It should of same width. return the updated styles


content_copyCOPY