JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="dataedit_cont">
	<div class="dataedit_wrap">
		<div class="dataedit_wrap_title">
			Igényfelmérés <i class="icon toggledownicon icon-angle_up"></i>
		</div>
		<div class="dataedit_toggle column3">
			<div class="row g-0">
				<div class="col-lg-4 col-md-6 col-12 dataedit_col">
					<div class="dataedit" id="dataedit_CASCO_BIZT_KOTES_OKA">
						<div class="dataedit_title">
							Casco bizt.kotes oka
						</div>
						<div class="dataeditable_cont">
							<div class="dataedit_text">
								Új kötés most vásárolt gépjárműre
							</div>
						</div>
						<a href="javascript:void(0)" class="dataedit_icon"><i class="icon icon-arrow_left_o"></i></a>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-12 dataedit_col">
					<div class="dataedit" id="dataedit_SZERZODO_ELOZETES_MEGBIZAS">
						<div class="dataedit_title">
							Előzetes meghatalmazás
						</div>
						<div class="dataeditable_cont">
							<div class="dataedit_text">
								Papírmentes meghatalmazás (B-DOC applikáció)
							</div>
						</div>
						<a href="javascript:void(0)" class="dataedit_icon"><i class="icon icon-arrow_left_o"></i></a>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-12 dataedit_col">
					<div class="dataedit" id="dataedit_KGFB_BIZT_EKEDV">
						<div class="dataedit_title">
							E-kommikácios kedv.
						</div>
						<div class="dataeditable_cont">
							<div class="dataedit_text">
								Igen
							</div>
						</div>
						<a href="javascript:void(0)" class="dataedit_icon"><i class="icon icon-arrow_left_o"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dataedit_wrap">
		<div class="dataedit_wrap_title">
			Szerződő (Üzembentartó) adatai <i class="icon toggledownicon icon-angle_up"></i>
		</div>
		<div class="dataedit_toggle column3">
			<div class="row g-0">
				<div class="col-lg-4 col-md-6 col-12 dataedit_col">
					<div class="dataedit" id="dataedit_SZERZODO_TIPUS">
						<div...

CSS

.dataedit_wrap_title {
    width: 100%;
    display: block;
    background-color: #d9d9d9;
}


.dataedit_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px; /* Adjust the gap between columns as needed */
}

.dataedit_col {
    margin-bottom: 10px; /* Adjust the margin between rows as needed */
}

/* Ensure all columns in the same row have equal height */
.dataedit_wrap .row::after {
    content: "";
    display: table;
    clear: both;
}