I have a code in which there is a `dragitem1` and a `dropitem1`,

Dragitem1 can be dragged and dropped to Dropitem1, 

**My problem** is on `dropping` the `Dragitem1`, i `want` the `dragitem1 width to be 100%` `on dropped area`(inside Dropitem1).

for this i used 

> 
> 
> ```
> assignedTabName[0].style.width = "100%";
> 
> ```
> 
> 

but didnt give the expected result.

How to make dragitem1 with to 100% on dropped area(after dropping)?

```js
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  console.log(data);
  assignedTabName = document.getElementById(data).className;
  console.log(assignedTabName);

  ev.target.appendChild(document.getElementById(data));
    assignedTabName[0].style.width = "100%";
}
```

```css
.dragitem1{
 border:2px solid black;
 width: calc(16.3% - 4px);
 height:80%;

 margin-left:0.5%;
 margin-top:0.5%;
 margin-right:0.5%;

 background-color:#2ecc71;
 }

.dropitem1{
 border:2px solid black;
 position:fixed;
 width:23vw;
 height:10vh;
 left:30vw;
 bottom:80vh;}
```

```html
<div class="dragitem1" draggable="true" ondragstart="drag(event)" id="drag1">
    <p id="p1">TEST</p>
    </div>

 <div class="dropitem1" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop1">
    </div>
```