I am having trouble with CSS creating 24 identical information on 3x8 (70x37mm) size.
I can adjust the size and margin to make everything fit inside the box but im having no luck on creating 3x8 (70x37mm) size box.
if I just set the width: 70mm; and height: 37mm ; everything gets on top of each other...
My data inside the 70x37mm-box is below:
let labellist = [];
for (let i = 1; i <= 24; i++) {
<div className="label-main" key={i}>
<p className="item_name">{item_name}</p>
<p className="Check_Date">Tillv:{Check_Date}</p>
<strong>
<i className="Batch_number">
batch# {Batch_number}
</i>
</strong>
<div className="row no-gutters ">
<div className="col-8 ">
<p className="Expire_Info"> {Expire_Info}</p>
<p className="prodcution">
<p>{type}</p>
<p>{address 1} </p>
<p>{address 2}</p>
<p> {email} </p>
<p className="OBS">{OBS}</p>
</p>
</div>
<div className="col-4">
{
<QRCode
value={Content}
renderas="svg"
style={{
width: "80px",
height: "80px",
}}
/>
}
</div>
</div>
</div>
}
return labellist;
return (
<div>
<div className="container">{renderLable()}</div>
</div>
)