We Keep Coding

How can I resize a div according to zoom?

I am having following UI.
Everything works good when zoom is 100%. But when user zooms in the UI get disturbed and is seen as following:
The card within the div does not resize. I want all the cards to take the width of the div titled E. Setting card width to 100% is creating issue for other divs. As cards get stretched for div having with bigger than div E.
div E display once card. There may be multiple card visible on horizontal scroll. Similarly, div R shows 3 cards at once. It may contain more cards. When zooming, some content of the card visible gets hidden in div E. Similarly, the last of 3 cards in div R is also gets partially hidden.
Here is the codepen link and below the code:
#div_A {
background-color: #B14C08;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_B {
background-color: #157668;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_C {
background-color: #E61B00;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_D {
background-color: #0078D4;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_E {
background-color: #0D283D;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
.holder {
min-height: 240px;
padding: 0 2px 0 2px;
}
.holder .card_holder {
padding: 0;
max-width: 290px;
}
.holder .xyz {
overflow-x: auto;
min-height: 240px;
}
.shortdetail {
display: flex;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
width: 287px;
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 100%;
height: 80px;
padding: 0px;
border: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
position: relative;
overflow: hidden;
}
.shortdetail {
margin: 5px;
flex-direction: row;
z-index: 2;
position: relative;
}
.profileinfo {
width: 100%;
margin: 0px 10px;
color: #5a5a5a;
line-height: 1.2;
font-style: initial;
}
.profileinfo .row {
margin: 0;
}
.profileinfo .col-8,
.col-4 {
padding: 0;
}
.profileinfo label {
margin-bottom: 0px;
}
.name {
font-size: 13px;
font-weight: 600;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="col-8">
<div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
<span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
</div>
<div class="row border border-primary" style="padding: 5px 0 5px 0;">
<div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
<div class="col-3 holder">
<div class="rounded-top" id="div_A">
Div A <button>Prev</button> <button>Next</button>
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 holder">
<div class="rounded-top" id="div_B">
Div B
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_C">
Div C
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 holder">
<div class="rounded-top" id="div_D">
Div D
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_E">
Div E
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Do not fix width or height with px, try with % and see

how to align a progress bar at the end of the previous?

I would like to know how to display a new progressbar which is displayed below the previous one but which must start where the previous one was finish
.meter {
height: 10px;
border-radius: 20px;
border-style: none;
margin-right: 40px;
background: red
}
.progress {
width: 40%;
border-radius: 15px;
border-style: none;
background: blue
}
<p> not this </p>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div> <br>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<p> something like this </p>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<div class="meter" style="width:100px; margin-left: 100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<div class="meter" style="width:100px; margin-left: 200px">
<div class="progress">
<div>40%</div>
</div>
</div>
i would like know in this exemple
how to make the second progress bar starts below the end of the first.
EDIT: i edited my code;
i use a loop ( .map in ReactJs ) to add new progress Bar

Here is an idea with some float hack
.meter {
border-radius: 20px;
margin-right: 40px;
background: red;
margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
content:"";
display:inline-block;
vertical-align:top;
height:1.1em; /* the height of a text line */
width: 0px; /* to not affect the total width */
}
/**/
.progress {
border-radius: 15px;
background: blue;
color: #fff;
float:left;
margin-bottom:3em; /* Big enough to push the next float*/
}
<div class="meter" >
<div class="progress" style="width: 40%;">
40%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 20%;">
20%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 10%;">
10%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 20%;">
20%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 10%;">
10%
</div>
</div>
That you can simplify and use one element for each meter:
.meter {
border-radius: 20px;
background: red;
margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
content:"";
display:inline-block;
vertical-align:top;
height:1.1em; /* the height of a text line */
width: 0px; /* to not affect the total width */
}
/**/
.meter:after {
content:attr(data-percentage);
width:var(--p,0);
border-radius: 15px;
background: blue;
color: #fff;
float:left;
margin-bottom:3em; /* Big enough to push the next float*/
}
<div class="meter" data-percentage="40%" style="--p:40%"></div>
<div class="meter" data-percentage="20%" style="--p:20%"></div>
<div class="meter" data-percentage="10%" style="--p:10%"></div>
<div class="meter" data-percentage="20%" style="--p:20%"></div>
<div class="meter" data-percentage="10%" style="--p:10%"></div>
UPDATE
Based on your last edit you can still consider the same trick
.meter {
border-radius: 20px;
border-style: none;
background: red;
margin-bottom:10px;
float:left;
}
.progress {
width: 40%;
border-radius: 15px;
border-style: none;
background: blue
}
.container:after {
content:"";
display:inline-block;
height:1.1em;
}
<p> something like this </p>
<div class="container">
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>

Show/Hide Transition for multiple elements

I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing

To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>

Responsive Card Layout CSS Design not Fixed

I want to make cards which are responsive but not fixed. What changes should I make to CSS so that it change change their sizes accordingly.
Here is the fiddle link for this Working Fiddle
The cars should change its size with resizing window however the position of the button should be at the bottom only, and in spite of content, size of all cards should be same.
CARD.HTML
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
CARD.CSS
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}

I believe all you need to do is change the card's width to min-width. This will force the card to be 100% width until 230px. As you can see in my altered version of your JSFiddle.
What you should keep in mind is your card content is broken down into rows of content. Each row looks like it should be 100% width of the card, therefore you don't need to actually apply a width to the content, just provide display: block. This will force it to be 100% width of it's parent. With content being 100% width of it's parent it's flexibility will always be dependent on the parent. Thus you can set the parents width to 100%, 50%, 200px whatever, the content will always follow.
Let me know if you need me to clarify anything :)
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
min-width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>

HTML expanding boxes on click

I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.
I created a gif so you can see what I mean. GIF
I have so far the basic structure on jsfiddle
When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.
Is the animation you can see in the gif possible with css or does it need javascriptl?
$(".row.boxes-container .box").click(function (e) {
$(".box-content-full").addClass("open");
});
.row.boxes-container{
position:relative;
}
.box:hover{
cursor:pointer;
}
.box-content{
padding:30px;
background-color:#f03939;
}
.box-content-full{
display:none;
width:0%;
transition: width 1s;
}
.box-content-full.open {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display:block;
transition: width 1s;
}
.box-content-full.open .inner{
padding:30px;
margin-left:15px;
margin-right:15px;
background-color: red;
}
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>

I did not use your html code but tried to get a result as close as possible to your gif:
$('.box').on('click', function() {
var $element = $(this);
var $openElement = $('<div class="absoluteBox"></div>');
$openElement.css('left', $element.position().left);
$openElement.css('right', $element.width());
$element.html($openElement);
$openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
});
.wrapper {
position:relative;
display:inline-block;
}
.box {
background-color:#CC0000;
width:150px;
height:200px;
display:inline-block;
margin-right:10px;
}
.box:last-of-type {
margin-right:0;
}
.absoluteBox {
position:absolute;
background-color:blue;
height:200px;
width:150px;
}
.box:hover {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box">
</div>
<div class="box"></div>
</div>
I made the opening box blue to be better noticed. This has to be changed via css of course to red.

Updated your fiddle:
EDIT 2:
Now it should reset when you click the box.
P.S. Click the second box for the effect.
P.P.S. The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!
EDIT:
Updated answer to expand element that was clicked.
https://jsfiddle.net/bszv7f90/9/
$(".row.boxes-container .box").click(function(e) {
$(this).children().each(function(i) {
if ($(this).attr('class') == 'box-content-full') {
$(this).toggleClass("exp");
}
});
$(".box-content-full").toggleClass("open");
$(".box-content").toggleClass("clicked");
});
.container {
max-width: 600px;
}
.row.boxes-container {
position: relative;
}
.box:hover {
cursor: pointer;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content-full {
display: none;
width: 0%;
transition: width 1s;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content.clicked {
display: none;
}
.box-content-full.open {
position: absolute;
max-width: 0%;
width: 0%;
z-index: 2;
display: none;
transition: width 1s;
}
.box-content-full.open.exp {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display: block;
transition: width 1s;
}
.box-content-full.open .inner {
padding: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
Now it should expand.
I preserved your code to make a quick copy-paste.