How to style div to add text beside each input box?

  css, html, javascript, reactjs

I have a component where I map each element in as row and have them side by side like so:
enter image description here

              {ARRAY.map((data, index) => {
                return (
                  <Row key={index} style={{
                    gridTemplateColumns: "25% 25% 25% 25%",
                    display: "grid",
                  }}>
                    <div //the first box in the picture
                        style={{
                          borderRadius: "8px",
                          backgroundColor: "#F5F6F9",
                        }}>
                       {values[index]}
                      </div>
                      <div>
                       <button>add</button> // I would like to add another button below this
                        
                      <Input //custom styled div
                        style={{
                          borderRadius: "8px",
                          height: "40px",
                          color: "#0F4379",
                        }}
                        value={values[index]}
                        onChange={(e) => this.updateValues(e.target.value, index)}
                      />
                      </div>
                 </Row>
                );
              })}

How can I add another button below add so they look like this:

enter image description here

If I add the button directly below add in my code, it ends up right beside it due to the Row layout. Thanks for any help

This is the styling code for Row:

export const Row = styled.div`
  padding: 2px 35px;
  border: none;
  position: relative;
  background-color: white;
  width: 100%;
`;

Source: Ask Javascript Questions

LEAVE A COMMENT