ReactJS: Render data in two columns

Question

I have this Component:

export const RenderDetail = props => {
  const createRows = props.content.reduce(function (rows, key, index) {
    console.log('rows, key, index', rows, key, index);
    return (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows;
  }, []);

 return (
    <div>
      {createRows.map((row, index) => {
        return (
          <div key={`item_${index}`}>
            <Row>
              {row.map((col, key) => {
                return (
                  console.log('col ', col),
                  (
                    <div key={`item_${key}`} style={{ margin: '20px' }}>
                      <Col>
                        <dl className="jh-entity-details">
                          <dt>
                            <span id={col.id}>{col.name}</span>
                          </dt>
                          <dd>{col.value}</dd>
                        </dl>
                      </Col>
                    </div>
                  )
                );
              })}
            </Row>
          </div>
        );
      })}
    </div>
  );
};

I pass to this component an array of Object like:

const Container = [
{
 id: "id",
 name: "ID",
 value: "10"
},
]

What I would to obtain:

I wanted to get the data divided into two columns, but in this way they are too close and stuck together. Is there a way to represent them so that they take up the whole page (always in two columns?)

EDIT:

Using <Col xs="12" md="6"> as suggested

Answer 1

I altered your sandbox. Check the new one

The problem was at this part of code

                <div key={`item_${key}`} style={{ margin: '20px' }}>
                  <Col>

sandbox

First of all i removed the div that enclosed the Col tag and then set the 6-grid attribute to become of 50% width.